Pages Navigation Menu

Coding is much easier than you think

jQuery form validation using jQuery Validation plugin

This article discusses client-side validation using jQuery’s validation plugin. This jQuery plugin has a bunch of standard validation methods such as a required field, valid email or URL, minimum and maximum lengths for a field, etc. In addition to that you can customize the look and feel of the error messages and their placement.

Library required

Let us start with a simple example.



<script src="js/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/userValidation.js"></script>
<link href="css/myCSS.css" rel="stylesheet">
<title>jQuery form Validation tutorial</title>
<form id="form" name="" action="">
  <div class="fieldgroup">
	     <label for="name">Name:</label> 
             <input name="name" size="20" />
		<input class="submit" type="submit" value="Submit" />


Points to be noted

  • Remember to include the the jQuery library and the validation plugin in the head section of JSP.
  • Remember to assign the id attribute of the form and the name attribute of all the fields that you want to validate.

Fire the jQuery Validation Plugin (userValidation.js File)


$(function() {
	rules : {
		name : {
			required : true,
			minlength : 4,
			maxlength : 20,
	messages : {
		name : {
			required : "Please enter a name",
			minlength : $.format("Minimum {0} characters required!"),
			maxlength : $.format("Maximum {0} characters allowed!")

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 Validate options.
The two parameters we used in validate method are:
rules: allows you to specify which fields you want to validate.
messages: allows you to specify the error message for a particular field. 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, minlength and maxlength). I’ve also introduced the format method in the message. This lets us replace the argument given for minlength and maxlength, such that we don’t need to hard-code that value if they ever change.
There are several other methods that can be used here. You can find list of built-in validation methods at Validation Methods.

Custom Validation Rules:

Suppose if you cant find any suitable built-in method for certain situation, then you can write your own validation methods. For example, there is no built-in method to validate Alpha character, we need to define our own method.

$(function() {
		rules : {
			name : {
				customvalidation : true
	$.validator.addMethod("customvalidation", function(value, element) {
		return /^[A-Za-z_ -]+$/.test(value);
	}, "Alpha Characters Only.");

Here I have defined our own validation method by calling the jQuery.validator.addMethod() method. This method 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.

You may also like …


jQuery Validation CSS

Note: the jQuery Validation Plugin adds class error to the inputs/labels. You only style them!

#form label.error {
	color: red;
#form input.error {
	border: 1px solid red;



This validation happens only on the client side. So if there is a JavaScript error, the browser could ignore the remaining validation and submit the form to the server. So it would be better to validate the data again on the server side.


jquery Validation demo

About Mohaideen Jamil

Am currently working as a Struts 2 Developer in a reputed IT Organisations. I can help you with teaching Core java and Struts 2. Follow me on Facebook or Google Plus. If you like my tutorials, consider making a donation to this charity, thanks.