jQuery - Validate form with jQuery validation plugin

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. - jquery.com

What is jQuery validation plugin?

This jQuery plugin makes simple clientside form validation trivial, while offering lots of option for customization. That makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate it into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 37 locales. - jquery-plugin-validation

See the code of the form and how it looks like

Register Form


User Name
    


Password
    


Confirm Password
    


Email
    


Confirm Email
    

How to call the validate?

$(document).ready(function() {
    $("#form").validate({
       //  
    });
});

We can add rules in validate, it is quite easy to understanding the function through the name.

    
rules: {
     name: {
         required: true,
         minlength: 5,
         maxlength: 20
     },
     
     pass1: {
         required: true,
         minlength: 8,
         maxlength: 30
     },
     
     pass2: {
         required: true,
         minlength: 8,
         maxlength: 30,
         equalTo: "#pass1"
     },
     
     email1: {
         required: true,
         email: true
     },
     
     email2: {
         required: true,
         email: true,
         equalTo: "#email1"
     }
    
},

Also, we can overwrite the error message

messages: {
     name: {
         required: "Please enter name.",
         minlength: "Minimum 5 characters.",
         maxlength: "Maximum 20 characters."
     },
     
     pass1: {
         required: "Please enter password.",
         minlength: "Minimum 8 chacters.",
         maxlength: "Maximum 30 characters."
     },
     
     pass2: {
         required: "Please enter password.",
         minlength: "Minimum 8 chacters.",
         maxlength: "Maximum 30 characters.",
         equalTo: "Inconsistent password."
     },
     
     email1: {
         required: "Please enter email.",
         email: "Please type a valid email."
     },
     
     email2: {
         required: "Please enter email.",
         email: "Please type a valid email.",
         equalTo: "Inconsistent email."
     }
}

So, when we input nothing and click register

Show some other error information