Quickly Validate Form Data with jQuery validate

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

    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

    The increasing mobile nature of the e-commerce market is one of the defining characteristics in the next few years with a steady increase in the number of apps available for online shopping and sales, along with a growing number of web-based numbers.

    From great brands that have stood the test of time, to startups that are raring to make it big, a company’s logo goes a long way in representing and promoting a brand.

    Graphic designers are creative people. Therefore, they cannot work under restrictions. In addition, their commitment to their projects has to be total, while they work.

    In logo design one needs to take into consideration different screen sizes on which it will be viewed