Form Validation using jQuery Validation Plugin


Client-side form validation is very useful for validating a form and it makes your web project more user-friendly. You can found many ways to perform client-side validation in HTML form, but jQuery Validation Plugin is the easiest way to validate a form. The jQuery Validation Plugin lets you implement form validation instantly with many customization options.

This tutorial will show you how to integrate client-side form validation using jQuery validation plugin. Also, this example form validation code will help you to use custom validation rules and messages. In the sample script, we’ll demonstrate a registration form validation with different rules and custom messages.

To use jQuery Validation Plugin you need to include the jQuery library (jquery.min.js) and jQuery validation plugin library (jquery.validate.js).

<script src="jquery.min.js"></script> <script src="jquery.validate.js"></script> 

The validate() method is used to validate a form based on the selector provided.
rules are key/value pairs defining custom rules. Key is the name of an element and value is an object consisting of rule/parameter pairs or a plain String.
messages are key/value pairs defining custom messages. Key is the name of an element and value is a message to display for respective element.

$(document).ready(function() {     $("#userForm").validate({         rules: {             name: "required",             email: {                 required: true,                 email: true             },             phone: {                 required: true,                 number: true             },             url: {                 required: false,                 url: true             },             username: {                 required: true,                 minlength: 6             },             password: {                 required: true,                 minlength: 6             },             confirm_password: {                 required: true,                 minlength: 6,                 equalTo: "#password"             },             agree: "required"         },         messages: {             name: "Please enter your name",             email: "Please enter a valid email address",             phone: {                 required: "Please enter your phone number",                 number: "Please enter only numeric value"             },             url: {                 url: "Please enter valid url"             },             username: {                 required: "Please enter a username",                 minlength: "Your username must consist of at least 6 characters"             },             password: {                 required: "Please provide a password",                 minlength: "Your password must be at least 6 characters long"             },             confirm_password: {                 required: "Please provide a password",                 minlength: "Your password must be at least 6 characters long",                 equalTo: "Please enter the same password as above"             },             agree: "Please accept our policy"         }     }); }); 


The user registration form HTML which is validated with jQuery Validation Plugin.

<form class="userform" id="userForm" method="post" action="">     <p>         <label for="name">Name</label>         <input id="name" name="name" type="text" >     </p>     <p>         <label for="email">E-Mail</label>         <input id="email" type="email" name="email" >     </p>     <p>         <label for="phone">Phone</label>         <input id="phone" type="phone" name="phone" >     </p>     <p>         <label for="url">URL</label>         <input id="url" type="url" name="url">     </p>     <p>         <label for="username">Username</label>         <input id="username" name="username" type="text">     </p>     <p>         <label for="password">Password</label>         <input id="password" name="password" type="password">     </p>     <p>         <label for="confirm_password">Confirm password</label>         <input id="confirm_password" name="confirm_password" type="password">     </p>     <p>         <label for="agree">Please agree to our policy</label>         <input type="checkbox" class="checkbox" id="agree" name="agree">     </p>     <p>         <input class="submit" type="submit" value="Submit">     </p> </form> 

CSS Code

The following CSS is used to styling the form and error message.

.userform{width: 400px;} .userform p {     width: 100%; } .userform label {     width: 120px;     color: #333;     float: left; } input.error {     border: 1px dotted red; } label.error{     width: 100%;     color: red;     font-style: italic;     margin-left: 120px;     margin-bottom: 5px; } .userform input.submit {     margin-left: 120px; } 

Here we’ve used mostly used validation methods, you can also use many other validation rules as per your requirement. See the list of built-in Validation methods from Plugin website.

Related Articles

Comments 0