Html Form Validation in Javascript

The previous lesson of Javascript Lessons Series was about making an ajax request to server and in this lesson we will learn to validate an html form in javascript.



The term form validation means filling all the necessary data of a form correctly. Form validation is very important because it lets the user know how to fill the form data and shows an alert message immediately if a user enters wrong data. If form validation is not done properly and the user is not told exactly what is wrong with the filled data, he will be annoyed pretty soon. Form validation should be user friendly. Html form validation can be done at both ends i.e server end and client end. Validating an html form in php would be an example of server side form validation. Javascript can be used for client side validation of an html form. Although form validation can be done is javascript but note that this is not a secure method of form validation because javascript can be turned off. An example of html form validation in javascript is given below:

Please fill the form given below:

Name:
Gender:	Male	Female
Country:	Select Your Country United States United Kingdom China India Russia
Email:
Password:

Css Code:

td{
width:100px;
height:30px;
font-family:Verdana;
font-size:14px;
}

Html Code:

<form method="POST" action="" onsubmit="return validateForm();">
<table>
<tr>
<td>Name: </td> 
<td colspan="2"><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Gender: </td><td>
<input type="radio" name="gender" id="male" value="Male" /> Male</td> 
<td><input type="radio" name="gender" id="female" value="Female" />Female</td>
</tr>
<tr>
<td>Country: </td> <td colspan="2"> <select id="country">
<option value="0">Select Your Country</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="China">China</option>
<option value="India">India</option>
<option value="Russia">Russia</option>
</select></td>
</tr>
<tr>
<td>Email:</td> <td colspan="2"><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>Password:</td> 
<td colspan="2"> <input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" name="submit" id="submit" /></td>
<td></td>
</tr>
</table>
</form>

In the above html code we have a simple html form which will call a javascript function on form submission (onsubmit="return validateForm();") and before the form data is sent to the server end we will validate the form data in javascript first. Javascript form validation function is given below:

Javascript Code:

<script type="text/javascript">
function validateForm(){
var name=document.getElementById('name').value;
var email=document.getElementById('email').value;
var password=document.getElementById('password').value;
var country=document.getElementById('country').value;
var maleGender=document.getElementById('male');
var femaleGender=document.getElementById('female');
/* Name Validation */
if(name == '' ){
 alert('Please enter your name.');
 return false;
}else{
 if(name.length > 20){
  alert('Name cannot be longer than 20 characters.');
  return false;
 }
}
/* Gender Validation */
if(!maleGender.checked && !femaleGender.checked){
 alert('Please select gender.');
 return false;
}
/* Country Validation */
if(country == 0){
 alert('Please select a country.');
 return false;
}
/* Email Validation */
if(email == ''){
 alert('Please enter your email address.');
 return false;
}else{
 var regularExpression = 
/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
 if(!regularExpression.test(email)){
  alert('Please enter a valid email address.');
  return false;
 }
}
/* Password Validation */
if(password == '' ){
 alert('Please enter your password.');
 return false;
}else{
 if(password.length < 6){
  alert('Password should be atleast 6 characters.');
  return false;
 }
}

alert('Form data validated!');

}
</script>

The above javascript code shows a form validation function i.e validateForm(). The first thing we have done in the validateForm() function is that we have got all the values entered by the user in the html form fields using document.getElementById() method. After getting the user input values of the html form, we start validating the form data. First we validate the name, it should not be empty and it should not be longer than 20 characters otherwise we return false in the form validation function. Next we make sure that one of the two radio buttons is checked and a gender is selected else we return false. After that we make sure that a country is selected from the drop down. In the next step we validate the email address of the user, it should not be empty and it should be in proper email address format. A regular expression is used to check if the email address entered by the user is valid or not. In the last step we validate the password entered by the user, it should not be empty and it should not be less than 6 characters. If all the data is filled correctly we should an alert box saying ('Form data validated!') and send data to the server side. If the data entered is not valid, we show an alert message stating what exactly is wrong with the filled data and return false in the validateForm() function to ensure that invalid data is not sent to the server end.

Stay tuned for more lessons...