Javascript Form Validation was originally performed on the server after the client had input the essential data and then clicked on the Submit button. If a client’s data were inaccurate or missing, the server would then send all of the data back and request that the form should be resubmitted with the right information. This was a time-consuming operation that put a significant strain on the server.
JavaScript allows the client’s computer to check form data before it sends it to the web server. Form validation often serves two purposes.
- Basic Validation: The form must be validated to ensure that all essential fields are completed. It would only take a loop over the form’s fields to check for data.
- Data Format Validation: The entered data must be validated for accurate value and form. Your code must provide proper logic to validate data.
Example of Javascript Form Validation
<html>
<head>
<title>HubToLearn Form Validation</title>
<script type = "text/javascript">
<!--
// The Form validation code should appear here.
//-->
</script>
</head>
<body>
<form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
<table cellspacing = "3" cellpadding = "3" border = "2">
<tr>
<td align = "right">Firstname</td>
<td><input type = "text" name = "Firstname" /></td>
</tr>
<tr>
<td align = "right">Middlename</td>
<td><input type = "text" name = "Middlename" /></td>
</tr>
<tr>
<td align = "right">Lastname</td>
<td><input type = "text" name = "Lastname" /></td>
</tr>
<tr>
<td align = "right">Age Range</td>
<td>
<select name = "Age">
<option value = "-1" selected>[Choose your age range]</option>
<option value = "1">18-25</option>
<option value = "2">26-32</option>
<option value = "3">33-42</option>
<option value = "4">43-60</option>
<option value = "5">61-72</option>
<option value = "6">73-81</option>
<option value = "7">82 above</option>
</select>
</td>
</tr>
<tr>
<td align = "right">Email address</td>
<td><input type = "text" name = "Email address" /></td>
</tr>
<tr>
<td align = "right">Country of Residence</td>
<td><input type = "text" name = "Country" /></td>
</tr>
<tr>
<td align = "right">Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td align = "right"></td>
<td><input type = "submit" value = "Submit" /></td>
</tr>
</table>
</form>
</body>
</html>Basic Javascript Form Validation
Let’s start with the basic form validation. When the onsubmit event occurs, the above code calls validate() to validate the data. The validate() method is implemented in the following code.
<script type = "text/javascript">
<!--
// This is where the Form validation code appears.
function validate() {
if( document.myForm.Name.value == "" ) {
alert( "Please type in your Firstname!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.Name.value == "" ) {
alert( "Please type in your Middlename!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.Name.value == "" ) {
alert( "Please type in your Lastname!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.Age.value == "-1" ) {
alert( "Type in your Correct Age Range!" );
return false;
}
if( document.myForm.EMail.value == "" ) {
alert( "Please type in your Email address!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Country.value == "" ) {
alert( "Please type in your Country of Residence!" );
document.myForm.Country.focus() ;
return false;
}
if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 ) {
alert( "Please type in your Zip Code!" );
document.myForm.Zip.focus() ;
return false;
}
return( true );
}
//-->
</script>Data Format Validation
Now we’ll look at how we may check the form data we’ve submitted before sending it to the web server.
The following example demonstrates how to validate an email address that has been entered. An email address must have both a ‘@’ symbol and a dot (.). Furthermore, the ‘@’ symbol must not be the initial character of the address, and the last dot should be at least two characters following the ‘@’ sign.
Example
<script type = "text/javascript">
<!--
function validateEmail() {
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 2 || ( dotpos - atpos < 3 )) {
alert("Fill in a Correct Email Address")
document.myForm.EMail.focus() ;
return false;
}
return( true );
}
//-->
</script>Read about Javascript classes
