Detail form validation in JavaScript

2020-06-15 07:44:43
OfStack

Form validation is used after the server has entered all the necessary data and pressed the submit button. If some of the entered client data is in the wrong form or is simply lost, the server sends all the necessary data back to the client and resubmits the requested form with the correct information. This is a lengthy process that adds to the server load.

In JavaScript, there is a way to validate data in the form of data on the client's computer before sending it to the web server. Form validation is typically performed in two ways.

Basic validation - First, the table must be checked to ensure that data entry is required for each of its 1 form fields. This will just need to loop through each field of the table and check the data. Data format validation - Second, the entered data must be checked for the correct format and value. This will require more logic to test the correctness of the data.

We'll give you an example of how validation works. Here's a simple way to do it:


<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 table above requires the validate() function to verify that the data occurred in the onsubmit event. Here 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 validation:

Now we'll see how we can validate the form data we entered before submitting it to the Web server.

This example shows how to validate the incoming E-mail address, which means that the E-mail address must contain at least 1 @ symbol and 1 dot (.). In addition, @ must never be the first character of an E-mail 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>