Friday, April 24, 2020

Client-side Form Validation in JavaScript



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.

  • 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>

Output

Below is the output of the above example.

Form Validation
Name
Email
Zip Code
Country

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>

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.

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>

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.
Share:

0 comments:

Post a Comment