Validating form using Jquery

HTML form can be validated with different methods like using simple JavaScript If Else statements or Ajax and if using any server side language like PHP it can be validated with PHP but if the simplest method where you don not have to write a lot of statements and still can use a lot of options is using JQuery Validation Plugin.

In this post we will see how to validate simple form using JQuery Validation Plugin. To use this plugin we need JQuery library. You can download latest from following link

http://jquery.com/

and download JQuery validation plugin from the following link.

http://jqueryvalidation.org/

First setup the HTML form using HTML markup

<form action="#" method="post" id="validateform" >
  <p>
    <input name="name" id="name" type="text" placeholder="Enter your name">
  </p>
  <p>
    <input name="email" id="email" type="text" placeholder="Enter your email address">
  </p>
  <p>
	<input name="password" id="password" type="text" placeholder="Enter your password">
  </p>
  <p>
    <input name="submit" type="submit" value="Submit data" />
  </p>
</form>

Now that you have your HTML form, add JQuery library and validation plugin in head section of your page and add the JavaScript snippet to validate your form.

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

jQuery(document).ready(function($){
	jQuery("#validateform").validate({
		rules: {
			name: "required",
			email: {
				required: true,
				email: true,
			},
			password: "required",
		},
		messages: {
			name: "Please enter your name",
			email: "Please enter a valid email address",
			password:"Please enter password",
		}
	});
});
</script>

Here we tell plugin to validate form with the id validateform and then we write the rules to specify which fields are required you can add any field by telling the id of that field. There are many options available which you can add to any particular field like for email we added true which will accept only valid email format. You can check many other options in the documentation.

We can also write down the message to be displayed in case of any error, simply write down the message in front of the field id. This is all the required things you need to do first now you can style your form as you need. The error message will be displayed with the class name error so you can style the error class as you need which can be like below

.error {
    color: #FF0000;
    display: block;
    float: none;
    font-size: 11px;
    padding: 5px 20px 0 0;
    text-align: left;
}

View Demo