JQuery Validation with example

The example form contains four fields: name, e-mail, comment and URL. The first three fields are required, whereas the URL field is optional. If you submit the form without filling in the required fields, you will be prompted with an error message.


Here is the code we used for the form in the example.

script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"
script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"

$(document).ready(function() {
$("#form1").validate({
rules: {
name: "required",// simple rule, converted to {required:true}
email: {// compound rule
required: true,
email: true
},
url: {
url: true
},
comment: {
required: true
}
},
messages: {
comment: "Please enter a comment."
}
});
});

<form id="form1" method="post" action="">
<div class="form-row"><span class="label">
Name *</span><input name="name" type="text"></div>
<div class="form-row"><span class="label">
E-Mail *</span><input name="email" type="text"></div>
<div class="form-row"><span class="label">
URL</span><input name="url" type="text"></div>
<div class="form-row"><span class="label">
Your comment *</span><textarea name="comment"></textarea></div>
<div class="form-row">
<input class="submit" value="Submit" type="submit"></div>




Remember to include the the jQuery library and the bassistance validation plugin. The link to the jQuery library must come first in the head section, otherwise the validation will not work.
Remember to assign the id attribute of the form and the name attribute of all the fields that you want to validate.

Now, let us see the validate() function in detail.

$(document).ready(function() {
$("#form1").validate({
rules: {
name: "required", // simple rule, converted to {required: true}
email: { // compound rule
required: true,
email: true
},
url: {
url: true
},
comment: {
required: true
}
},
messages: {
comment: "Please enter a comment."
}
});
});


All we are doing here is initializing the validation of the form using the validate() function. It can take several parameters. In the example above, we use only two of them, but you can find a list of all the options for the validate() function at http://docs.jquery.com/Plugins/Validation/validate#toptions.

The two parameters we used are:
rules: allows you to specify which fields you want to validate. In this case, we are validating name, email, url and comment. For each field, we specify if the field is required (required: true). We can specify that it must be a valid e-mail address, URL, etc.
messages: allows you to specify the error message for a particular field (like the comments field in the example above). If you don't specify it, a default message is provided that says "this field is required".

In the example above, we only used three validation methods (required, email and url). There are several other methods that can be used here. Here are a few of them:

remote: requests a resource to check the element for validity.
min: makes the element require a given minimum.
date: makes the element require a date.
creditcard: makes the element require a credit card number.
equalTo: requires the element to be the same as another one.

You can find an exhaustive list of built-in validation methods at http://docs.jquery.com/Plugins/Validation.

Writing Your Own Validation Method

Consider a form where the user chooses his favorite sport. If he submits the form without choosing a sport, he is prompted with an error message.
Favorite Sport


As there is no built-in method to validate a drop down menu, we need to define our own method.

jQuery.validator.addMethod(
"selectNone",
function(value, element) {
if (element.value == "none")
{
return false;
}
else return true;
},
"Please select an option."
);

$(document).ready(function() {
$("#form2").validate({
rules: {
sport: {
selectNone: true
}
},
});
});


We do so by calling the jQuery.validator.addMethod() method. It takes three parameters:
name: The name of the method, used to identify and referencing it, must be a valid javascript identifier.
method: the actual method implementation, returning true if an element is valid.
message: The default message to display for this method.

In the validate function, we specify that the 'sport' field should be validated using the selectNone method.

Being able to define your own validation methods allows you to validate pretty much anything that you can think of. Using this plugin, you can very quickly add validation to a form. However, let me remind you that this validation happens only on the client side. While JavaScript validation is useful because of its responsiveness, if there is a JavaScript error, the browser could ignore the remaining validation and submit the form to the server. So my final word of advice would be to validate the data again on the server side.