by Developer
1. March 2010 05:28
Mainly we will use javascript for validating the several fields of
our webpage. For example we have registration page with several fields
like username, mobile number, email, date of birth and gender. We have
to handle each filed validation in a different way. Here we are going to
learn how to validate simple textbox, radio button and checkbox.
jQuery provides us simple way to validate each filed. Here I am
explaining validation procedure for each filed.
Below is the code to validate our simple registration form fields.
<html>
<head>
<title>validating
the registration form fields using jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btn_submit').click(function(event) {
//validating username
if
($('#user_name').val().length < 1) {
alert('Please enter user name');
$('#user_name').focus();
return false;
}
if (!is_username($('#user_name').val())) {
alert('Please enter valid user name');
$('#user_name').focus();
return false;
}
function is_username(uname) {
var pattern = new RegExp(/^[a-z0-9_]+$/);
return pattern.test(uname);
}
//validating mobile number
if
($('#mobile_number').val().length < 1) {
alert('Please enter your mobile number');
$('#mobile_number').focus();
return false;
}
if ((!is_mobile($('#mobile_number').val())) ||
($('#mobile_number').val().length < 10)) {
alert('Please enter valid mobile number');
$('#mobile_number').focus();
return false;
}
function is_mobile(mobile) {
var pattern = new RegExp(/^[0-9]+$/);
return
pattern.test(mobile);
}
//validating email address
if
($('#email_id').val().length < 1) {
alert('Please enter your Email Id');
$('#email_id').focus();
return false;
}
if (!is_email($('#email_id').val())) {
alert('Please enter valid Email Id');
$('#email_id').focus();
return false;
}
function is_email(emailid) {
var pattern = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
return pattern.test(emailid);
}
//validating date of birth
if
($('#dob').val().length < 1) {
alert('Please enter your Date of birth');
$('#dob').focus();
return false;
}
if (!is_dob($('#dob').val())) {
alert('Please enter valid date of birth');
$('#dob').focus();
return false;
}
function is_dob(dob) {
var pattern = new RegExp(/\b\d{1,2}[\/-]\d{1,2}[\/-]\d{4}\b/);
return pattern.test(dob);
}
//validating gender
if
($("input[name='rdgender']:checked").val() != 'M' &&
$("input[name='rdgender']:checked").val() != 'F') {
alert('Please select your gender');
return
false;
}
//validating
checkbox
if ($('#chk_tc:checked').val() == null) {
alert('Please agree terms and conditions');
return false;
}
});
});
</script>
</head>
<body>
<div style="margin-left:300px;">
<label>User Name</label><input type="text"
id="user_name"/><br/><br/>
<label>Mobile
Number</label><input type="text"
id="mobile_number"/><br/><br/>
<label>Email Id</label><input type="text"
id="email_id"/><br/><br/>
<label>Date Of
Birth</label><input type="text"
id="dob"/><br/><br/>
<label>Gender</label>
<table id="rdgender"
border="0">
<tbody>
<tr>
<td>
<input id="rdgender_0" name="rdgender" value="M"
type="radio"/>
<label
for="rdgender_0">Male</label>
</td>
<td>
<input id="rdgender_1" name="rdgender" value="F"
type="radio"/>
<label
for="rdgender_1">Female</label>
</td>
</tr>
</tbody>
</table>
<br/><br/>
<input type="checkbox"
id="chk_tc"/><label>I agree the Terms &
Condition</label><br/><br/>
<input
type="submit" id="btn_submit" value="Submit"/>
</div>
</body>
</html>
In the above example we have simple registration form with several
fields like username, mobile number, email, date of birth and gender. We
will discuss validation procedure for each field separately.
In the first step we bind the our validation function for submit
button through click event using
$('#btn_submit').click(function(event)
{. Inside this function we define the validation methods for
each filed
Validating the user name field:
//validating username
if ($('#user_name').val().length < 1) {
alert('Please enter user name');
$('#user_name').focus();
return false;
}
if (!is_username($('#user_name').val())) {
alert('Please enter valid user name');
$('#user_name').focus();
return false;
}
function is_username(uname) {
var pattern = new RegExp(/^[a-z0-9_]+$/);
return pattern.test(uname);
}
By using above code we are validating the user name filed. It is
simple textbox, first we are checking whether user entered anything in
the user name field or not by checking its length. After that we are
restricting the user to enter only alphabetic, underscore(_) and numbers
within the user name filed by passing user name field value o the
RegExp(/^[a-z0-9_]+$/);
Validating mobile number:
//validating mobile number
if ($('#mobile_number').val().length < 1) {
alert('Please enter your mobile number');
$('#mobile_number').focus();
return false;
}
if ((!is_mobile($('#mobile_number').val())) ||
($('#mobile_number').val().length < 10)) {
alert('Please enter valid mobile number');
$('#mobile_number').focus();
return false;
}
function is_mobile(mobile) {
var pattern = new RegExp(/^[0-9]+$/);
return
pattern.test(mobile);
}
For the mobile number field, we have to allow only numbers and length
should be minimum of 10.
Validating Email Id:
//validating email address
if ($('#email_id').val().length < 1) {
alert('Please enter your Email Id');
$('#email_id').focus();
return false;
}
if (!is_email($('#email_id').val())) {
alert('Please enter valid Email Id');
$('#email_id').focus();
return false;
}
function is_email(emailid) {
var pattern = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
return pattern.test(emailid);
}
There are some specific conditions for email id like email id must
have @ and .(dot). We are validating the Email Id by using
RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
Validating the date of birth:
//validating date of birth
if ($('#dob').val().length < 1) {
alert('Please enter your Date of birth');
$('#dob').focus();
return false;
}
if (!is_dob($('#dob').val())) {
alert('Please enter valid date of birth');
$('#dob').focus();
return false;
}
function is_dob(dob) {
var pattern = new RegExp(/\b\d{1,2}[\/-]\d{1,2}[\/-]\d{4}\b/);
return pattern.test(dob);
}
By using above code we are validating the date of birth. Date of
birth must be like dd/mm/yy(day/month/year). We are validating the date
of birth field by using
RegExp(/\b\d{1,2}[\/-]\d{1,2}[\/-]\d{4}\b/);
Validating the radio button (gender):
//validating gender
if
($("input[name='rdgender']:checked").val() != 'M' &&
$("input[name='rdgender']:checked").val() != 'F') {
alert('Please select your gender');
return
false;
}
We have two radio buttons to ask user about his gender. We are
validating radio buttons based on user input. We can validate radio
button, that means gender field by comparing its value using
$("input[name='rdgender']:checked").val().
It should
be "M" or "F".
Validating checkbox:
//validating checkbox
if
($('#chk_tc:checked').val() == null) {
alert('Please agree terms and conditions');
return false;
}
At the end of your registration form, you need to have terms &
conditions. User must accept your terms & conditions. Here you have
checkbox, user must check the checkbox. You can validate checkbox by
using its value
$('#chk_tc:checked').val(). It should
not be null.
In this way you can easily validate your registration form by using
jQuery javascript functions.
