Form validation using jQuery.
jQuery has a plugin for form validation, you can download this plugin from
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Here are the steps to add Jqury form validation on your page.
Step 1 – Download jQuery library and jQuery form validation plugin
-
- JQuery (Can be downloaded from http://jquery.com/ )
- JQuery form validation plug-in ( Can be downloaded from http://bassistance.de/jquery-plugins/jquery-plugin-validation/)
- After downloading, you will have to include these two files in your HTML page under head tag
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>we assume these two files are in same directory where your page exist.
We need two things
Step 2 – The page on which validation is to be perform
- Create a page, for example test.html.
-
Now create the form, for example.
<form id=“form1″ method=“post” action=“”>
<div class=“form-row”>
<span class=“label”>Name *</span>
<input type=“text” name=“name” />
</div>
<div class=“form-row”>
<span class=“label”>E-Mail *</span>
<input type=“text” name=“email” />
</div>
<div class=“form-row”>
<span class=“label”>URL</span>
<input type=“text” name=“url” />
</div>
<div class=“form-row”>
<span class=“label”>Your comment *</span>
<textarea name=“comment” ></textarea>
</div>
<div class=“form-row”>
<span class=“label”>Password *</span>
<input type=text name=“password” />
</div>
<div class=“form-row”>
<input class=“submit” type=“submit” value=“Submit”>
</div>
</form>
Now we have created a simple form, which we will validate.
Note: The two jQuery files need to be included in this page.
Step 3 – The Complete page with JQuery form validation Plugin
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type=”text/javascript”>
//Here Form validation realated operation will be done
//initiate validator on load
$(document).ready(function() {
$(”#form1″).validate({
rules: {
name: “required“,// simple rule, converted to {required:true}
email: {// compound rule
required: true,
email: true
},
url: {
url: true
},
comment: {
required: true
},
password:{
required: true
minlength:5 //Password minimum length would be 5 characters
}
},
messages: { //Custom Error/Validation Message goes here, if this will not be given then the default error/validation message will be shown
name: “You must enter the name”,
comment: “Please enter a comment.”
}
});
});
</script>
<style type="text/css">
* { font-family: Verdana; font-size: 11px; line-height: 14px; }
.submit { margin-left: 125px; margin-top: 10px;}
.label { display: block; float: left; width: 120px; text-align: right; margin-right: 5px; }
.form-row { padding: 5px 0; clear: both; width: 700px; }
label.error { width: 250px; display: block; float: left; color: red; padding-left: 10px; }
input[type=text], textarea { width: 250px; float: left; }
textarea { height: 50px; }
</style>
</head>
<body>
<form id=“form1″ method=“post” action=“”>
<div class=“form-row”>
<span class=“label”>Name *</span>
<input type=“text” name=“name” />
</div>
<div class=“form-row”>
<span class=“label”>E-Mail *</span>
<input type=“text” name=“email” />
</div>
<div class=“form-row”>
<span class=“label”>URL</span>
<input type=“text” name=“url” />
</div>
<div class=“form-row”>
<span class=“label”>Your comment *</span>
<textarea name=“comment” ></textarea>
</div>
<div class=“form-row”>
<span class=“label”>Password *</span>
<input type=text name=“password” />
</div>
<div class=“form-row”>
<input class=“submit” type=“submit” value=“Submit”>
</div>
</form>
</body>
</html>
Description:---
All we are doing here is calling an onload function, which initiates the validation of the form using validate. The validate plugin requires you pass through a few paramenters.
Parameter details used in this plugin:—-
rules – allows you to specify the field names you wish to act upon, in our case we have used name, email, url, comment and password. Inside of this we are specifying if the the field is required or not, by passing either true or false, we want to validate all fields, so all are marked as true. The next parameter is minlength, which ..you guessed it, allows you to set a minimum number of characters to be entered.
message – allows you to set a specific message for a particular field, if you choose not to set a message, a default one is provided which will say something like “this field is required”
List of built-in Validation methods
- required()
Makes the element always required. - minlength(length)
Makes the element require a given minimum length. - maxlength(length)
Makes the element require a given maximum length. - min(value)
Makes the element require a given minimum value. - max(value)
Makes the element require a given maximum. - range(range)
Makes the element require a given value range. - Email()
Makes the element require a valid email - url()
Makes the element require a valid url - date()
Makes the element require a date. - equalTo(other)
Requires the element to be the same as another one - digits()
Makes the element require digits only.
