JavaScript is also used to validate the Form data of HTML pages before sending the data to server.
JavaScript can be validate any type of data.
(Ex. NULL values, Text, Numeric, Email, Date etc.)
For example take a HTML Form like below : ( Save this file as textData.php)
<form name="myForm" action="send_data.php" onsubmit="return validateForm()" method="post">
User Name : <input type="text" name="username">
First Name: <input type="text" name="firstname">
Password : <input type="password" name="password">
Mobile : <input type="text" name="mobile">
Gender : <select name="gender">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
Date of Birth (yyyy/mm/dd) : <input type="text" name="dateofbirth">
Email Id : <input type="text" name="emailid">
<input type="submit" name="submit" value="Submit">
</form>
Note: If you want to validate any data you should write in the below function only as per the above html code. You can change the function names and field names as per your needs.
function validateForm()
{
//write below code here if required
return true;
}
To Test Required Fields :
This script is used to check the username is empty or not, if empty it will promt an alertbox to user with message "User Name Required" and it will focus on the particular username field.
if( document.myForm.username.value == null || document.myForm.username.value == "" )
{
alert("User Name Required");
document.myForm.username.focus();
return false;
}
To Test Text Data or Digits(Numbers) Only:
This script is used to check the field value is text or digits, based on the condition it will prompt an error, other wise ignores.
Here we need to create two expressions based on our requirements to test whether the field value is Text or Number.
var numbexp = /^[0-9]+$/;
var charexp = /^[a-zA-Z]+$/;
if( !document.myForm.firstname.value.match(charexp) )
{
alert("Please Enter Text Data Only");
document.myForm.firstname.value = ""; //This is used to remove the data from the field
document.myForm.firstname.focus();
return false;
}
if( !document.myForm.mobile.value.match(numbexp) )
{
alert("Please Enter Numbers Only");
document.myForm.mobile.value = ""; //This is used to remove the data from the field
document.myForm.mobile.focus();
return false;
}
To Test Email Fields :
This script is used to check the field contains value is valid email or not, it will accept the value only if contains a '@' symbol, a '.' symbol and 2 to 3 charactors after dot symbol. Other wise prompt alert to user.
var emailexp = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if( !document.myForm.emailid.value.match(emailexp) )
{
alert("Please Enter Valid Email Id");
document.myForm.emailid.value = "";
document.myForm.emailid.focus();
return false;
}
To Check Length of the Field :
This script used to check the length of the field value, if it has more than 10 characters it will show an alert message, other wise it will ignore.
if( document.myForm.username.value.length >= 10 )
{
alert("Maximum 10 Characters only");
document.myForm.username.value = "";
document.myForm.username.focus();
return false;
}
This script is used to validate a value between a given range i.e, minimun and maximum value. Assume username should be Minimum 6 Characters and Maximum 12 Characters
if( document.myForm.username.value.length < 6 || document.myForm.username.value.length >12 )
{
alert("User Name should contain min 6 characters and max 12 characters");
document.myForm.username.value = "";
document.myForm.username.focus();
return false;
}
To Test Date Format :
This script is used to check the date format according to your needs. using this expression we can validate the date field mostly.
var dateexp = /^[0-9]{4}\/(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])+$/;
if( document.myForm.dateofbirth.value.match(dateexp) )
{
alert("Invalid Date Format... Correct it");
document.myForm.dateofbirth.focus();
return false;
}
To Test Select Boxes :
This script is used to check the select box is selected or not.
if(document.myForm.gender.selectedIndex == 0)
{
alert("Please Select Gender");
document.myForm.gender.focus();
return false;
}
