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 * indicates required fields.         First Name *    Last Name *     Gender* --Select-- Male Female     Birthday * Year 1960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008   Month JanFebMarAprMayJunJulAugSepOctNovDec   Day 12345678910111213141516171819202122232425262728293031   Email Address*     Country* Country Afghanistan SamoaAndorraAngolaAnguillaAntarcticaAntigua And BarbudaArgentinaArmeniaArubaAustraliaAustriaAzerbaijanBahamasBahrainBangladeshBarbadosBelarusBelgiumBelizeBeninBermudaBhutanBoliviaBosnia And HerzegowinaBotswanaBrazilBrunei DarussalamBulgariaBurkina FasoBurundiCambodiaCameroonCanadaCape VerdeCayman IslandsCentral African RepublicChadChileChinaChristmas IslandCocos (keeling) IslandsColombiaComorosCongoCongo, The Democratic Republic Of TheCook IslandsCosta RicaCote D'ivoireCroatia (local Name: Hrvatska)CubaCyprusCzech RepublicDenmarkDjiboutiDominicaDominican RepublicEast TimorEcuadorEgyptEl SalvadorEquatorial GuineaEritreaEstoniaEthiopiaFalkland Islands (malvinas)Faroe IslandsFijiFinlandFranceFrench GuianaFrench PolynesiaFrench Southern TerritoriesGabonGambiaGeorgiaGermanyGhanaGibraltarGreeceGreenlandGrenadaGuadeloupeGuamGuatemalaGuineaGuinea-bissauGuyanaHaitiHoly See (vatican City State)HondurasHong KongHungaryIcelandIndiaIndonesiaIran (islamic Republic Of)IraqIrelandIsraelItalyJamaicaJapanJordanKazakhstanKenyaKiribatiKorea, Democratic People's Republic OfKorea, Republic OfKuwaitKyrgyzstanLao People's Democratic RepublicLatviaLebanonLesothoLiberiaLibyan Arab JamahiriyaLiechtensteinLithuaniaLuxembourgMacauMacedonia, The Former Yugoslav Republic OfMadagascarMalawiMalaysiaMaldivesMaliMaltaMarshall IslandsMartiniqueMauritaniaMauritiusMayotteMexicoMicronesia, Federated States OfMoldova, Republic OfMonacoMongoliaMontserratMoroccoMozambiqueMyanmarNamibiaNauruNepalNetherlandsNetherlands AntillesNew CaledoniaNew ZealandNicaraguaNigerNigeriaNiueNorfolk IslandNorthern Mariana IslandsNorwayOmanPakistanPalauPalestinian Territory, OccupiedPanamaPapua New GuineaParaguayPeruPhilippinesPolandPortugalPuerto RicoQatarReunionRomaniaRussian FederationRwandaSaint Kitts And NevisSaint LuciaSaint Vincent And The GrenadinesSamoaSan MarinoSao Tome And PrincipeSaudi ArabiaSenegalSeychellesSierra LeoneSingaporeSlovakia (slovak Republic)SloveniaSolomon IslandsSomaliaSouth AfricaSpainSri LankaSt. HelenaSt. Pierre And MiquelonSudanSurinameSwazilandSwedenSwitzerlandSyrian Arab RepublicTaiwan, Province Of ChinaTajikistanTanzania, United Republic OfThailandTogoTokelauTongaTrinidad And TobagoTunisiaTurkeyTurkmenistanTurks And Caicos IslandsTuvaluUgandaUkraineUnited Arab EmiratesUnited KingdomUnited StatesUruguayUzbekistanVanuatuVenezuelaViet NamVirgin Islands (british)Virgin Islands (u.s.)Wallis And Futuna IslandsYemenYugoslaviaZambiaZimbabwe     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

<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