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.
Download source code: jQuery_form_validation.zip (36.46 kb)