Using Form Validator Jquery Plugin to save time in validations


Validations are common and essential part of day to day life of web developers, whenever a form is created the validations are required. This is common case for all kind of forms, even though we have HTML5, knowledge of some validation plugins are handy to save time just in case.

Form validation has been a big time frustration for many web developers even after coming of jQuery. But after coming of the various plugin this has been made easier with jquery validation plugin. You though the documentation of this plugin is quite good, but if you are doing a startup with this plugin, this tutorial if perfect for you.

First you need to download it here.

After extraction you'll get the plugin script in dist folder named as "jquery.validate.min.js".
this file is the production version of the plugin else you can see the developer version as jquery.validate.js.
the form I will use to demonstrate will look like this.
Lets not waste time and get started.

first of all make a simple form with the fields, I am making simple fields.


<body>
    <div>Demo Form</div>
        <form id="demo-form" action="" method="post">
	    <div>
		<input type="text" name="name" placeholder="Name" />
	    </div>
	    <div>
		<input type="text" name="email" placeholder="Email" />
	    </div>
	    <div>
	 	<input type="password" name="password" placeholder="password" />
	    </div>
	    <div>
		<input type="password" name="cpassword" placeholder="password" />
	    </div>
	    <div>
	 	<input type="submit" id="submit" name="submit" />
	    </div>
         </form>
</body>

after this I am using this simple css to decorate a little bit.


		body{
			margin:0 auto;
			padding:100px;
			background:#abcdef;
		}
		input{
			padding:2px;
			margin:2px;
			width:200px;
			height:30px;
			border:solid 2px #999999;
			border-radius:5px;
		}
		.error{
			font-weight:bold;
			color:#ff0000;
		}
		div{
			text-align:left;
		}

Did you notice that I have defined "error" class. but I have not put this class on any element in the form. This is actually a class added in the error message using this you can customize the error message displayed on your form.

you need to include jquery and the validator plugin in the head section of the webpage.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.validate.min.js" type="text/javascript" ></script>

finally the script to define the validations on the form


$(document).ready(function(){
	$("#demo-form").validate({
		rules: {
			name: "required",
			password: {
				required: true,
				minlength: 5
			},
			cpassword: {
				required: true,
				equalTo: "#password"
			},
			email: {
				required: true,
				email: true
			}
		},
		messages: {
			name: "Please enter your Name",
			password: {
				required: "Please provide a password",
				minlength: "Your password must be at least 5 characters long"
			},
			cpassword: {
				required: "Please Confirm the password",
				equalTo: "Password does not match"
			},
			email: "Please enter a valid email address"
		}
	});
});

after this you are done to do this. the validations and the rules are simple first you define the rules for the validations and corresponding messages. there are more than just required and mixlength,maxlength, you can see complete list of validations here.

also once you get started, this gets easier, you can add validations on checkboxes, select, radio and other type of fields. you can see it all in documentation.

The complete code of this page looks like this.


<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="jquery.validate.min.js" type="text/javascript" ></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#demo-form").validate({
				rules: {
					name: "required",
					password: {
						required: true,
						minlength: 5
					},
					cpassword: {
						required: true,
						equalTo: "#password"
					},
					email: {
						required: true,
						email: true
					}
				},

				messages: {
					name: "Please enter your Name",
					password: {
						required: "Please provide a password",
						minlength: "Your password must be at least 5 characters long"
					},
					cpassword: {
						required: "Please Confirm the password",
						equalTo: "Password does not match"
					},
					email: "Please enter a valid email address"
				}
			});
		});
	</script>
	<style>
		body{
			margin:0 auto;
			padding:100px;
			background:#abcdef;
		}
		input{
			padding:2px;
			margin:2px;
			width:200px;
			height:30px;
			border:solid 2px #999999;
			border-radius:5px;
		}
		.error{
			font-weight:bold;
			color:#ff0000;
		}
		div{
			text-align:left;
		}
	</style>
<head>
<body>
	<div>Demo Form</div>
	<form id="demo-form" action="" method="post">
		<div>
			<input type="text" name="name" placeholder="Name" />
		</div>
		<div>
			<input type="text" name="email" placeholder="Email" />
		</div>
		<div>
			<input type="password" name="password" placeholder="password" />
		</div>
		<div>
			<input type="password" name="cpassword" placeholder="password" />
		</div>
		<div>
			<input type="submit" id="submit" name="submit" />
		</div>
	</form>
</body>
</html>

See the working demo here.

Reference:

References: Validator plugin offcial page