How To Use Html Default Form Validation While Using Ajax Request.

29 December 2022, 00:23
Frontend Jquery

Hello Guys,
Today We will learn About HTML form and validation. As we all know Html provides various default validations. If we usually submit the form. Then Html validates the form and prevents the user to submit. But If we use the Ajax method to submit the form. Then Html doesn't validate the form.
Many users and developers want to use HTML form validation and Ajax submission at the same time.
There are many js plugins available for this. But these plugins may increase the loading time of your website.
I will So you a simple method to use HTML validation along with ajax requests.

Html and Ajax validation

You can check the below code for the solution.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TemplateBench Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        $(document).on('click','.submit-btn',function (e) {
            if(document.getElementById('validateform').reportValidity()){
                e.preventDefault();
                $.ajax({
                    url: "https://templatebench.com/",
                    type: "GET",
                    cache: false,
                    success: function(dataResult){
                        console.log(dataResult);
                    }
                });
            }
        });
    </script>
</head>
<body>

    <div class="container">
        <h2>TemplateBench User Login</h2>
        <form action="" id="validateform">
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" required>
            </div>
            <div class="form-group">
                <label for="pwd">Password:</label>
                <input required type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
            </div>
            <div class="form-group form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" name="remember"> Remember me
                </label>
            </div>
            <button type="submit" class="btn btn-primary submit-btn">Submit</button>
        </form>
    </div>

</body>
</html>

In this code, I am using the reportValidity() method, Which checks whether the form is validated or not.
If the form is validated then I am preventDefault() the form to submit and use an ajax code to submit the form.

I hope this post is helpful to you.

Thanks

Tagged in : html jquery form validation ajax