Sunday, September 5, 2010

Validate form in JavaScript

How to validate a form in JavaScript ?

Following example shows you how to validate a form JavaScript.

It is a good practice validate form fields before you submit the from. Because there can be number of mistakes during the submission. Some users forget to fill all required fields and some are filled the form with errors. You can avoid these common errors using client side validation and server side validation. You must include server side validation in you code. Because there can be unexpected results during the program execution, when you are forget to validate user inputs or when user disabled the JavaScript on his browser.

If you validate user inputs before request send to the server, It is convenient to the users as well as to you. Because if you use javascript to validate the form the browser does not submit the form until user entered valid data. So no need to send submit the same form many times for a single task. Also it serves server resources too.

The following example shows you how to validate a simple web form using javascript.

User Registration

User Registration
* indicates required fields.
       
First Name *   
Last Name *    
Gender*    
Birthday *
   
 
Email Address*    
Country*    
Address Line 1*    
Address Line 2    
Address Line 3    
Postal Code *    
       
     


1. Example code for validate web form in JavaScript.

Javascript Code

<script type="text/javascript" language="javascript">

function show_terms_and_conditions(){
var popup= window.open('terms-and-conditions.html','Terms and conditions','width=350,height=190,left=412,top=284');
return false;
}

function validate_form(){
var error_count=0;
var bd_error_count=0;

if(!is_not_empty("firstName","e_firstName")){error_count++;}
if(!is_not_empty("lastName","e_lastName")){error_count++;}
if(!validate_dropdown("gender","e_gender",0)){error_count++;}
if(!validate_dropdown("b_year","e_b_day",bd_error_count)){bd_error_count++;error_count++;}
if(!validate_dropdown("b_month","e_b_day",bd_error_count)){bd_error_count++;error_count++;}
if(!validate_dropdown("b_day","e_b_day",bd_error_count)){bd_error_count++;error_count++;}
if(!is_valid_email("email_address","e_email_address")){error_count++;}
if(!validate_dropdown("country","e_country",0)){error_count++;}
if(!is_not_empty("address_line_1","e_address_line_1")){error_count++;}
if(!is_not_empty("postal_code","e_postal_code")){error_count++;}

if(error_count>0){return false;}
var agreed=document.getElementById("chk_terms_and_conditions");
if(agreed.checked==false){
alert("Please accept terms and conditions before proceed");
return false;
}
return true;
}

function validate_dropdown(field,error_container,e_count){
var selected_value=document.getElementById(field).value;
if(selected_value=="0"){
return display_notification_icon(error_container,true);
}else{
return display_notification_icon(error_container,(e_count>0?true:false));
}
}

function is_not_empty(field,error_container){
var textBox=document.getElementById(field);
if(textBox.value.replace(/\s+$/,"")==""){
return display_notification_icon(error_container,true);
}else{
return display_notification_icon(error_container,false);
}
}

function display_notification_icon(field,has_error){
if(has_error==true){
document.getElementById(field).innerHTML="<img src=\"images/error.gif\" width=\"16\" height=\"16\" border=\"0\" title=\"Please fill required fields\" />";
return false;
}else{
document.getElementById(field).innerHTML="";
return true;
}
}

function is_valid_email(field,error_container){
if(is_not_empty(field,error_container)==true){
var emailAddress=document.getElementById(field);
var regExEmail=/^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;
if(!regExEmail.test(emailAddress.value)){
return display_notification_icon(error_container,true);
}else{
return display_notification_icon(error_container,false);
}
}else{
return true;
}
}


</script>

HTML Code

<html><head><title>How to validate a form in javascript</title></head><body>
<form id="validate-form-using-javascript" name="validate-form-using-javascript" method="post" action="" onsubmit="javascript: return validate_form();" >
<table border="0" align="center">
<tr>
<td colspan="4"><h4>User Registration </h4></td>
</tr>
<tr>
<td colspan="4" align="right">* indicates required fields. </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>First Name * </td>
<td><label>
<input name="firstName" type="text" id="firstName" size="30" class="html_element_border" onblur="javascript:is_not_empty('firstName','e_firstName');"/>
</label></td>
<td>&nbsp;&nbsp;</td>
<td id="e_firstName"></td>
</tr>
<tr>
<td>Last Name * </td>
<td><label>
<input name="lastName" type="text" id="lastName" size="30" class="html_element_border" onblur="is_not_empty('lastName','e_lastName')" />
</label></td>
<td>&nbsp;</td>
<td id="e_lastName">&nbsp;</td>
</tr>
<tr>
<td>Gender*</td>
<td><label>
<select name="gender" id="gender" class="html_element_border" onblur="javascript:validate_dropdown('gender','e_gender',0);">
<option value="0">--Select--</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</label></td>
<td>&nbsp;</td>
<td id="e_gender">&nbsp;</td>
</tr>
<tr>
<td>Birthday * </td>
<td><table border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td id="year_drop_down"><select name="b_year" id="b_year" class="html_element_border" onblur="javascript:validate_dropdown('b_year','e_b_day',0);">
<option value="0" selected="selected">Year</option><option value="1980">1980</option><option value="1981">1981</option><option value="1982">1982</option><option value="1983">1983</option><option value="1984">1984</option><option value="1985">1985</option><option value="1986">1986</option><option value="1987">1987</option><option value="1988">1988</option><option value="1989">1989</option><option value="1990">1990</option><option value="1991">1991</option><option value="1992">1992</option>
</select></td>
<td>&nbsp;</td>
<td><select name="b_month" id="b_month" class="html_element_border" onblur="javascript:validate_dropdown('b_month','e_b_day',0);">
<option value="0" selected="selected">Month</option>
<option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option>
</select></td>
<td>&nbsp;</td>
<td><select name="b_day" id="b_day" class="html_element_border" onblur="javascript:validate_dropdown('b_day','e_b_day',0);">
<option value="0" selected="selected">Day</option>
<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option>
</select></td>
</tr>
</table></td>
<td>&nbsp;</td>
<td id="e_b_day"></td>
</tr>
<tr>
<td>Email Address* </td>
<td><label>
<input name="email_address" type="text" id="email_address" size="30" class="html_element_border" onblur="javascript:is_valid_email('email_address','e_email_address');"/>
</label></td>
<td>&nbsp;</td>
<td id="e_email_address">&nbsp;</td>
</tr>
<tr>
<td>Country*</td>
<td><label>
<select name="country" id="country" style="width:150px;" class="html_element_border" onblur="javascript:validate_dropdown('country','e_country',0);">
<option value="0" selected="selected">Country</option><option value="IN">India</option><option value="LK">Sri Lanka</option><option value="GB">United Kingdom</option><option value="US">United States</option>
</select>
</label></td>
<td>&nbsp;</td>
<td id="e_country">&nbsp;</td>
</tr>
<tr>
<td>Address Line 1* </td>
<td><input name="address_line_1" type="text" id="address_line_1" size="30" class="html_element_border" onblur="javascript:is_not_empty('address_line_1','e_address_line_1');"/></td>
<td>&nbsp;</td>
<td id="e_address_line_1">&nbsp;</td>
</tr>
<tr>
<td>Address Line 2 </td>
<td><label>
<input name="address_line_2" type="text" id="address_line_2" size="30" class="html_element_border"/>
</label></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Address Line 3 </td>
<td><label>
<input name="address_line_3" type="text" id="address_line_3" size="30" class="html_element_border"/>
</label></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr><tr>
<td>Postal Code * </td>
<td><label>
<input name="postal_code" type="text" id="postal_code" class="html_element_border" onblur="javascript:is_not_empty('postal_code','e_postal_code');"/>
</label></td>
<td>&nbsp;</td>
<td id="e_postal_code">&nbsp;</td>
</tr>
<tr>
<td colspan="4" align="right"><label>
<input name="chk_terms_and_conditions" type="checkbox" id="chk_terms_and_conditions" value="1" class="html_element_border"/>
I accept <a href="javascript:void(0);" onclick="javascript:show_terms_and_conditions();">terms</a> and conditions. </label></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><label>
<input type="submit" name="Submit" value="Register" class="html_element_border"/>
</label></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</form></body></html>

 


©-Copyright By Duminda Chamara   JavaScript Validation  
Posted by Duminda Chamara at 8:46 PM 1 comments
Subscribe to: Posts (Atom)