Quickly Validate Form Data with jQuery validate

Last Updated at : March 30, 2018 By - Usama Muneer | 1884

    Lets take a sample form data that we would want to validate

    <form id="twt-form" method="post">
     <input type="text" name="name" required>
     <input type="email" name="email" required>
     <input type="password" name="password" required>
     <input type="password" name="password_confirmation" required>
    </form>

    Downloading the Plugin

    You can download the latest release of this time from their Github download page. The only file we’ll be using is jquery.validate.js

    Include it in

    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/jquery.validate.js"></script>

    Validate Form Data

    Well, that was it, now we can simply jump to validating our form data with jQuery validate plugin & see how its done in no time.

    <script type="text/javascript">
    
        $("#twt-form").validate({
            rules: {
                name: {
                    required:true,
                },
                email:{
                    required:true,
                    email:true
                },
                password:{
                    required:true,
                    minlength:8
                },
                password_confirmation:{
                    required:true,
                    minlength: 8,
                    equalTo: "#password"
                }
            },
            messages: {
                first_name: {
                    required: "First Name is Required"
                },
                last_name: {
                    required: "Last Name is Required"
                },
                email: {
                    required: "Email Address is Required",
                    email: "Please enter valid Email Address"
                },
                password: {
                    required: "Password is Required",
                    minlength: "Your password must be at least 8 characters long"
                },
                password_confirmation: {
                    required: "Password Confirmation is Required",
                    minlength: "Your password must be at least 8 characters long",
                    equalTo: "Please enter the same password as above"
                }
            }
        })
        </script>

    Adding Custom Rules

    For instance, we need our password to be more strong & they should contain one lower and upper letter as well as one special character. We do not have something like this by default in this plugin. But we can create one rule for that.

    <script type="text/javascript">
        //Note that whatever name we assign to the method, we need to use the same in our rules
        $.validator.addMethod('strong_password', function (value) {
            var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/;
            return reg.test(value);
        });
    </script>

    Now we can set this name to true inside of our password object, also we can assign some custom message to it as well.

    password: {
      strong_password:true
     }

    You may create as much custom rules as your requirement.

    Displaying Errors

    Now inside of your validate form method, you may assign the placement for displaying your error messages, wherever you like in your html. For instance, we’re referring to after the element.

    errorPlacement: function (error, element) {
     error.insertAfter(element);
    },

    Conclusion

    Head over to the plugin’s documentation for more information on the additional methods and property it ships with for your easiness. Its a quick yet easy way to validate your forms in no time.
    Leave us a comment below if you have any query regarding this article. You may also follow us on Twitter.

    blog user
    Usama Muneer

    A web enthusiastic, self-motivated & detail-oriented professional Full-Stack Web Developer from Karachi, Pakistan with experience in developing applications using JavaScript, WordPress & Laravel specifically. Loves to write on different web technologies with an equally useful skill to make some sense out of it.

    Related Posts

    UI is an integral part of UX and therefore affects your conversions highly. To ensure your UI always result in a high conversion rate, the top user experience design companies list the 8 mistakes that you must avoid making.

    It is essential that websites are designed to impress and intrigue potential customers and clients. There are various trends out there which, when utilized correctly, can significantly improve the quality of websites.

    Here are some website design hacks that can help you convert your website visitors into qualified prospects and eventually paying customers.

    In this article, we focus on the user interface of mobile apps. The primary objective is that the user experience should be optimal and therefore we give you some advice that you should take into account.