There are several ways to perform validation on html forms but nothing can beat the flexibility and easiness of jQuery’s validation plug-in. The advantage of using this plugin is that you don’t have to write the validation rules from the scratch(ofcourse, thats the reason we use plugin) and the code is much organized and cleaner. I am going to demonstrate examples to show how we can implement validation on html forms.

To use the plugin you would need to include JS file for Jquery plugin and well as Jquery validate plugin like this:-

Example:-

The validation rule above implies that the name field cannot be left blank. It shows a default message “This field is required” as show below in the screenshot:-

We can also use customer messages. In the messages block we can specify messages for each field depending on the constraint violation(like maxlength,minlength,required etc.) Here is an example:-

Screenshot:-

We can also use several properties like minlength and maxlength for fields such as SSN number, PAN number etc.

We can also use a custom validation like(The password field must contain upperCase, Lowercase characters and atleast 1 digit etc.). This can be done by using addmethod and then specifying regex pattern inside the method.

Here is an example to validate that both the password field must be same:-

Here is a working JSFIDDLE example that validates that both the password field must be same using a custom validation method(addMethod).

JS FIDDLE

That was all! I hope it helped 🙂

Thanks.