jQuery Validation Plugin http://bassistance.de/jquery-plugins/jquery-plugin-validation/  is very popular and powerful plugin. Can be integrated in a project from the very beginning or plugged into existing form. What is great about the plugin is support for multiple languages, custom rules for pretty much any type of form input and it’s constantly developed and updated. Here are few examples of how it works and how to implement these techniques.

1. Let’s take a look at the very basic example. Simple form. In this case only name and email (also checking for valid email address) is required.

 
<form id="mainForm" action="formhandler.php" method="post">
	<div>
		<label form="name">Name</label>
		<input type="text" id="name" name="name">
	</div>
			
	<div>
		<label form="email">Email</label>
		<input type="email" id="email" name="email">
	</div>
			
	<div>
		<label form="phone">Phone</label>
		<input type="text" id="phone" name="phone">
	</div>
			
	<div>
		<label form="type">Type</label>
		<select id="type" name="type">
			<option value="jQuery">jQuery</option>
			<option value="PHP">PHP</option>
			<option value="HTML">HTML</option>
			<option value="CSS">CSS</option>
		</select>
	</div>
			
	<div>
		<input type="submit" value="Submit" id="submit">
	</div>
					
</form>

after applying some css, latest jquery and the plugin, some rules that apply to this specific form need to be included. In order to write the rules we need to know input name attribute. So, basic rule looks like this:

name: { required: true }

And here is entire jquery.

$("#mainForm").validate({
	rules: {
	  name: {
		required: true
		},
	  email: {
		required: true,
		email:true
	  },
	  type: {
		required: true
	  }
	      },
	messages: {
	  name: {
		required: "*"
		},
	  email: {
		required: "*",
		email: "*"
		},
	  message: {
		required: "*"
		}
	},
    errorPlacement: function(error, element) {
	error.hide().insertAfter(element).fadeIn(350);
	error.siblings('label').addClass('label-error');
    }

Live Demo

Will definitely look to use this in a future project.

For more information: http://blog.jquery.com/2012/03/26/bowling-for-jquery-apr-2012-dc/