Hello guys! Morning to you all and welcome to my new tutorial post on JavaScript. In this new tutorial, i will be discussing about how to use JavaScript for various form validations. Make sure to read through carefully and ask questions where necessary.
Form validation normally occurs at the server, after the client had entered all of the necessary data and then pressed the submit button. If the data entered by the client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct data. This was really a lengthy which used to put a lot of burden on the server.
JavaScript provides a way of validating form's data on the client's computer before sending it to the web server. Form validation do generally performs two functions.
Form validation normally occurs at the server, after the client had entered all of the necessary data and then pressed the submit button. If the data entered by the client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct data. This was really a lengthy which used to put a lot of burden on the server.
JavaScript provides a way of validating form's data on the client's computer before sending it to the web server. Form validation do generally performs two functions.
- Basic Validation - First of all, the form must be checked to make sure that all mandatory fields are filled in. It would require just a loop through each field in the form and check for data.
- Data Format Validation - Secondly, the data that was entered must be checked for correct form and value. You code must include appropriate logic to test correctness of data.
You can also read our tutorial post on: The definitive guide to proper Error Handling in JavaScript
Example
We will take an example to fully understand the process of validation in. Blow is a simple form in HTML format.
<html>
<head>
<title>Form Validation</title>
<script type = "text/javascript">
<!--
// Form Validation code will go in here.
//-->
</script>
</head>
<body>
<form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate() );" >
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td align = "right">Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td align = "right">Email</td>
<td><input type = "text" name = "Email" /></td>
</tr>
<tr>
<td align = "right">Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td align = "right">Country</td>
<td>
<select name = "Country">
<option value = "-1" selected>[ choose yours ]</option>
<option value = "1">USA</option>
<option value = "2">Nigeria</option>
<option value = "3">Canada</option>
</select>
</td>
</tr>
<tr>
<td align = "right"></td>
<td><input type = "button" value = "submit" /></td>
</tr>
</table>
</form>
</body>
</html>
<head>
<title>Form Validation</title>
<script type = "text/javascript">
<!--
// Form Validation code will go in here.
//-->
</script>
</head>
<body>
<form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate() );" >
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td align = "right">Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td align = "right">Email</td>
<td><input type = "text" name = "Email" /></td>
</tr>
<tr>
<td align = "right">Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td align = "right">Country</td>
<td>
<select name = "Country">
<option value = "-1" selected>[ choose yours ]</option>
<option value = "1">USA</option>
<option value = "2">Nigeria</option>
<option value = "3">Canada</option>
</select>
</td>
</tr>
<tr>
<td align = "right"></td>
<td><input type = "button" value = "submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Output
Below is the output of the above example.
You can also read our tutorial post on: JavaScript Math Methods
Basic Form Validation
Let us see how to do a basic form validation. In the above form, we are calling validate() function to validate the data when the onsubmit event is occurring. The following code shows the implementation of this validate function.
<html>
<head>
<title>Form Validation</title>
<script type = "text/javascript">
<!--
// Form Validation code will go in here.
function validate() {
if ( document.myForm.Name.value == " " ) {
alert( "Please provide your name!" );
document.myForm.Name.focus();
return false;
}
if ( document.myForm.Email.value == " " ) {
alert( "Please provide your Email !" );
document.myForm.Email.focus();
return false;
}
if ( document.myForm.Zip.value == " " | | isNaN ( document.myForm.Zip.value ) | |
document.myForm.Zip.value.length != 5 ) {
alert( "Please provide a zip in the format #####." );
document.myForm.Zip.focus();
return false;
}
if ( document.myForm.Country.value == "-1" ) {
alert( "Please provide your country!" );
return false;
}
return ( true);
}
//-->
</script>
</head>
<body>
<form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate() );" >
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td align = "right">Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td align = "right">Email</td>
<td><input type = "text" name = "Email" /></td>
</tr>
<tr>
<td align = "right">Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td align = "right">Country</td>
<td>
<select name = "Country">
<option value = "-1" selected>[ choose yours ]</option>
<option value = "1">USA</option>
<option value = "2">Nigeria</option>
<option value = "3">Canada</option>
</select>
</td>
</tr>
<tr>
<td align = "right"></td>
<td><input type = "button" value = "submit" /></td>
</tr>
</table>
</form>
</body>
</html>
<head>
<title>Form Validation</title>
<script type = "text/javascript">
<!--
// Form Validation code will go in here.
function validate() {
if ( document.myForm.Name.value == " " ) {
alert( "Please provide your name!" );
document.myForm.Name.focus();
return false;
}
if ( document.myForm.Email.value == " " ) {
alert( "Please provide your Email !" );
document.myForm.Email.focus();
return false;
}
if ( document.myForm.Zip.value == " " | | isNaN ( document.myForm.Zip.value ) | |
document.myForm.Zip.value.length != 5 ) {
alert( "Please provide a zip in the format #####." );
document.myForm.Zip.focus();
return false;
}
if ( document.myForm.Country.value == "-1" ) {
alert( "Please provide your country!" );
return false;
}
return ( true);
}
//-->
</script>
</head>
<body>
<form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate() );" >
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td align = "right">Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td align = "right">Email</td>
<td><input type = "text" name = "Email" /></td>
</tr>
<tr>
<td align = "right">Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td align = "right">Country</td>
<td>
<select name = "Country">
<option value = "-1" selected>[ choose yours ]</option>
<option value = "1">USA</option>
<option value = "2">Nigeria</option>
<option value = "3">Canada</option>
</select>
</td>
</tr>
<tr>
<td align = "right"></td>
<td><input type = "button" value = "submit" /></td>
</tr>
</table>
</form>
</body>
</html>
You can also read our tutorial post on: The complete guide to JavaScript Math Object with examples
Data Format Validation
Now we are going to look at how to validate our entered form data before submitting it to the web server.
The following example shows how to validate an entered email address. An email address must contain at least an '@' sign and a dot ( . ). Also, the '@' must not be the first character of the email address, and the last dot must at least be one character after the '@' sign.
The following example shows how to validate an entered email address. An email address must contain at least an '@' sign and a dot ( . ). Also, the '@' must not be the first character of the email address, and the last dot must at least be one character after the '@' sign.
Example
Try the following code below for email validation
<script type = "text/javascript">
<!--
function validateEmail() {
var emailID = document.myForm.Email.value;
atpos = emailID.indexOf( "@" );
dotpos = emailID.lastIndexOf( "." );
if (atpos < 1 | | ( dotpos - atpos < 2 )) {
alert("Please enter correct email ID");
document.myForm.Email.focus();
return false;
}
return ( true );
}
//-->
</script>
<!--
function validateEmail() {
var emailID = document.myForm.Email.value;
atpos = emailID.indexOf( "@" );
dotpos = emailID.lastIndexOf( "." );
if (atpos < 1 | | ( dotpos - atpos < 2 )) {
alert("Please enter correct email ID");
document.myForm.Email.focus();
return false;
}
return ( true );
}
//-->
</script>
Alright guys! we have finally come to the end of this tutorial post on Form Validation. In my next tutorial, i will be discussing about the JavaScript Animations.
Thanks for reading and bye for now.
Thanks for reading and bye for now.