Home > Article > Web Front-end > Detailed explanation of form validation in JavaScript_Basic knowledge

Detailed explanation of form validation in JavaScript_Basic knowledge

WBOYOriginal: 2016-05-16 15:54:30958browse

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.

Basic Validation - First, the form must be checked to ensure data entry is required for each of its form fields. This will just loop through each field of the table and check the data.
Data format verification - Secondly, the data being entered must be checked for correct format and values. This will require putting more logic in place to test the correctness of the data.

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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript AOP programming examples_javascript skillsNext article：JavaScript AOP programming examples_javascript skills

See more

Detailed explanation of form validation in JavaScript_Basic knowledge

Related articles