Quickly Validate Form Data with jQuery validate

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.