JavaScript Form Validation

last edited on: 27-Jan-2018; tagged: javascript,validation


A form (checkout our tutorial HTML Form) is used to gather user input and send it to the server for processing.  Example: user registration form or a job application form. Data those are sent to the server are required to check the validity before processing. There are two types of validation server side validation and client side validation. Here we are going to discuss about client side form validation using JavaScript.

We can divide the validation in two ways:

  1. Basic Validation
  2. Format Validation

Basic Validation: In this type validation, the form must be checked to make sure that all the mandatory fields are filled in. Example: First Name, Last Name is a mandatory field.

Format Validation: In this type validation, the data that user entered must be checked for correct format or as required. Example: the email format or an age range.

Example of Basic Validation:

<html>
  <head>
      <title>Form Validation</title>
<script type="text/javascript">
<!—
// Form validation code will come here.
function basicValidation()
{    
if( document.myForm.FullName.value == "" )
{
alert( "Please provide your full name!" );
document.myForm.FullName.focus() ;
return false;
}      
if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}                      
if( document.myForm.Age.value == "" )
 {
alert( "Please provide your age!" );
document.myForm.Age.focus() ;
return false;
}       
return( true );
      }
   //-->
</script>
   </head>  
   <body>
<form action="process_.php" name="myForm" method="post" onsubmit="return(basicValidation());">
         <table cellspacing="2" cellpadding="2" border="1">          
            <tr>
               <td align="right">Full Name *</td>
               <td><input type="text" name="FullName" /></td>
            </tr>
            <tr>
               <td align="right">EMail *</td>
               <td><input type="text" name="EMail" /></td>
            </tr>
            <tr>
               <td align="right">Age *</td>
               <td><input type="text" name="Age" /></td>
            </tr>     
<tr>
               <td align="right"></td>
               <td><input type="submit" value="Submit" /></td>
            </tr>         
         </table>
      </form>
   </body>
</html>

In the above example we have put a JavaScript function named basicValidation() which will use to validate the HTML Form named MyForm. The function check the HTML Form elements FullName, Email, Age if those fields are empty then shown an alert message and focus the text input. The Form will only submit to the server after all fields are filling up.

Example of Format Validation:

Where we will validate the form by thing in our mind: 1. The Email must be a valid email. 2. The age must be a number and must be between 25 and 35.

function formatValidation()
    if( document.myForm.FullName.value == "" )
     {
        alert( "Please provide your full name!" );
        document.myForm.FullName.focus() ;
        return false;
      }                      
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.EMail.value)==false)
 {
   alert("You have entered an invalid email address!");
    document.myForm.EMail.focus();
    return false;
 }
var your_age = document.myForm.Age.value;
if (isNaN(your_age) || your_age < 25 || your_age > 35)
 {
    alert( "Please provide your age!" );
    document.myForm.Age.focus();
     return false;
 }       
 return( true );
}
</script>

In the above example first we have tested the email with regular expression and used JavaScript isNaN() function. The isNaN () function determines whether a value is an illegal number (Not-a-Number). This function returns true if the value equates to NaN. Otherwise, it returns false.

Related

JavaScript Cookies

tagged: javascript,cookies