Quickly Validate Form Data with jQuery validate

March 30, 2018 By - Usama Muneer | 430

    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

    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

    Up to 90% of information transmitted to the brain is visual; this is the reason people respond quickly to catchy design and images.

    What happens when a start-up decides to hand over their critical online landing platform to a bunch of newbies? Let’s talk about Serene Air and find out.