Home > Article > Web Front-end > Detailed explanation of form validation in JavaScript_Basic knowledge
Form validation is used to happen on the server, after the client has entered all the necessary data and then pressed the submit button. If some of the data that has been entered by the client has been in the wrong form or is simply missing, then the server will have to send all the data back to the client and request the form to be resubmitted with the correct information. This is a lengthy process that increases the load on the server.
JavaScript provides a way to validate form data on the client's computer before sending it to the web server. Form validation is usually performed in two ways.
We will give an example to understand the verification process. The following is a simple form:
<html> <head> <title>Form Validation</title> <script type="text/javascript"> <!-- // Form validation code will come 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">UK</option> <option value="3">INDIA</option> </select> </td> </tr> <tr> <td align="right"></td> <td><input type="submit" value="Submit" /></td> </tr> </table> </form> </body> </html>
Basic form validation:
First, we'll show you how to do a basic form validation. The above table requires the validate() function to validate the data before the onsubmit event occurs. The following is the implementation of the validate() function:
<script type="text/javascript"> <!-- // Form validation code will come 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>
Data format verification:
Now we will see how we validate the form data we enter before submitting it to the web server.
This example shows how to validate an entered email address, which means that the email address must contain at least an @ symbol and a dot (.). Additionally, @ must not be the first character of the email address, and the last dot must be one character after the @ symbol:
<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>