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  

3 comments:

jenny said...

From operating systems to multimedia, PC & mobile games to anti-virus, from drivers to registry cleaners and internet tools our website features all the latest soft wares for safe and free downloading enjoy.

Khánh Minh said...

Có một làn da đẹp và ngăn ngừa quá trình lão hóa da chính là đều mà hầu hết mọi phụ nữ điều ao ước có được thuốc giảm cân 1234 diet drops , nó không quá khó nếu bạn dùng Oxynergy Time Exception Serum sẽ giúp đẹp da và ngăn lão hóa da hiệu quả và an toàn , ngoài ra khi ra ngoài nên kết hợp với trang điểm nhẹ nhàng bằng love me for me flawless finish powder compact , pillow plush cushiony lip balmlip gallery creamy color classic lipstick sẽ giúp các bạn trông đẹp hơn và thêm tự tin khi ra ngoài . Ngoài ra nên kết hợp với các loại collagen làm đẹp da shiseido pure white mỗi ngày . Thật tuyệt vời nếu các cô gái được các tràng trai khen đẹp và thơm mát , để có được điều này nên dùng amazonian wild lily shower gel , Fijian Water Lotus Shower Gel , atlas mountain rose shower gel , những sản phẩm này được làm từ thiên nhiên nên rất an toàn hiệu quả rất cao mà ai cũng muốn sử dụng.

ane semprul said...

This blog is so nice to me. I will continue to come here again and again. Visit my link as well. Good luck
obat aborsi
cara menggugurkan kandungan
obat telat datang bulan
obat penggugur kandungan
obat aborsi
cara menggugurkan kandungan