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>
  1. Create a form with your required fields.
  2. 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 Ruleshttp://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>
  1. In this jQuery part call the class validate() by specifying the form id
  2. 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.
  3. 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

Related Posts

JQuery Remove duplicate elements

JQuery Remove duplicate elements – Easy method

JQuery Remove duplicate elements: It’s very easy to remove duplicate elements from a list using jQuery. Demo: Let’s say we have below list: Here multiple duplicate values…

jQuery sorting by price

jQuery sorting by price – Easy method(jQuery 3.x)

In this example let’s check how to do jQuery sorting by price in an easy way. Demo: Its a very important feature in ecommerce platforms to do…

sum of datatable column

Calculate sum of Datatable columns and display in footer – Easy method with sum()

In this example let’s check how to calculate sum of datatable columns (multiple columns) and display the same in footer. In some cases we may need to…

jquery datatable

jQuery Datatable – Easy Steps

Here is simple example to create jQuery Datatable. jQuery Datatable organizes data in grid like format of rows and columns. It is very organized, interactive and intutive….

jquery toggle

jQuery Toggle() Method

How to do jquery Toggle() method to show/hide onclick The jQuery toggle() method is used to toggle between the hide() and show() method. It shows the hidden…

jquery validation

jQuery validation for confirm password

How to validate password and confirm password using jQuery validation plugin ? Earlier we have discussed how to validate a form validation with jQuery validate plugin, in…

Leave a Reply

Your email address will not be published. Required fields are marked *