Validate a form using jQuery

How to validate a form using jQuery or form validation using jQuery plugin ?

We can validate a form using jQuery very simply and in an easy way. jQuery provides plugins for validate forms and all we have to do is just include those plugins and specify rules.

By this plugin the clientside form validation is done very easily and it provides plenty of customizations also. It is a good choice for new works from scratch and as well as existing works also. It consist of useful set of validation methods, URL and email validations, remote functions, etc.

The basic steps to validate a form using jquery is to specify the form fileds, include jquery validation plugins and specify the rules.

HTML :

To validate a form using jQuery, first you need to create the form with your required fields. Checkout the simple form below.

<!DOCTYPE html>
<html>
<head>
	<title>jQuery validation</title>
	<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
	<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/additional-methods.min.js"></script>
	<style type="text/css">
		.span
		{
			margin-left: 40%;
			margin-top: 5%;
		}
		.error
		{
			color:red;
		}
	</style>
</head>
<body>
	<div class="span">
	    <h2 class="text-center">Sign Up</h2>
	    <form id="validate" method="POST" action="">
	    <label>First Name</label>
	    <input type="text" name="firstname" class="span3">
	    <label>Last Name</label>
	    <input type="text" name="lastname" class="span3">
	    <label>Email Address</label>
	    <input type="email" name="email" class="span3">	
	    <br>    
	    <input type="submit" value="Sign up" class="btn btn-primary pull-right">
	    <div class="clearfix"></div>
	    </form>
	</div>
</body>
</html>

Create a form with your required fields.
Include the below files to give some basic designs,

Bootstrap css : https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css

Bootstrap js : https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js

3. Include the jquery.js file

jQuery.js : https://code.jquery.com/jquery-1.11.1.min.js

4. The next step is to include the plugin files. I have included jQuery validate js file and its additional methods file. The additional methods file will let you to set some optional rules.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/additional-methods.min.js"></script>

Optional rules are as follows ;

maxWords
minWords
rangeWords
letterswithbasicpunc
alphanumeric
lettersonly
nowhitespace
ziprange
zipcodeUS
integer
vinUS
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
phonesUK
postcodeUK
strippedminlength
email2 (optional TLD)
url2 (optional TLD)
creditcardtypes
ipv4
ipv6
pattern
require_from_group
skip_or_fill_minimum
accept
extension

Checkout these links for more details:

Options: http://jqueryvalidation.org/validate

Methods: http://jqueryvalidation.org/category/plugin/

Standard Rules: http://jqueryvalidation.org/category/methods/

Optional Rules available with the additional-methods.js file:

Some extra styles given as below

<style type="text/css">
.span
{
	margin-left: 40%;
	margin-top: 5%;
}
.error
{
	color:red;
}
</style>

.span class is to set the form to the center

.error class is to give a red color to the error message, its a built in class so you can specify whatever changes or designs you wanted in this class.

jQuery :

Let’s check the script to validate a form using jquery plugin,

<script type="text/javascript">
	$(document).ready(function() {
   		$("#validate").validate({
	      	rules: {
	         	firstname: 'required',
	         	lastname: 'required',
	         	email: {
	            	required: true,
	            	email: true,//add an email rule that will ensure the value entered is valid email id.
	         	},
	      	},
	      	messages: {
			   	firstname: 'Firstname is required',
			   	lastname: 'Lastname is required',
			   	email: {
			   		required : 'Email id required',
			   		email : 'Enter a valid email',
			   	}
			},
	   });
	});
</script>

In this jQuery part call the class validate() by specifying the form id
rules defines whatever the validation rules we want to apply
1. specify the name of form fields and validation rule
2. we can specify multiple rules to a single field by enclosing the rules in a curly braces. we can specify messages for each rules also.
messages is an optional part and it will show the customized error messages we are giving. If you dont want the custom error messages just remove the messages part and it will show the default error messages.

Hope this tutorial validate a form using jQuery will help you.

Checkout jQuery validation for confirm password using this same validation plugin. For other jQuery solutions please visit jQuery

Post Views: 1,279