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

* indicates required fields.

First Name *

Last Name *

Gender*

Birthday *

Email Address*

Country*

Address Line 1*

Address Line 2

Address Line 3

Postal Code *

I accept terms and conditions.

1. Example code for validate web form in JavaScript.

Javascript Code

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;
}

</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> </td>
<td> </td>
<td> </td>
<td> </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>  </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> </td>
<td id="e_lastName"> </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> </td>
<td id="e_gender"> </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> </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> </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> </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> </td>
<td id="e_email_address"> </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> </td>
<td id="e_country"> </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> </td>
<td id="e_address_line_1"> </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> </td>
<td> </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> </td>
<td> </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> </td>
<td id="e_postal_code"> </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> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="submit" name="Submit" value="Register" class="html_element_border"/>
</label></td>
<td> </td>
<td> </td>
</tr>
</table>
</form></body></html>