How to do basic form validation using JavaScript?

JavascriptWeb DevelopmentFront End Technology

JavaScript provides a way to validate form's data on the client's computer before sending it to the web server. 

Basic form validation includes the form to be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data.

Example

You can try to run the following code to implement basic form validation in JavaScript −

<html>
   <head>
      <title>Form Validation</title>
      <script>
         // Form validation
         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">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>
raja
Published on 16-Feb-2018 14:17:40
Advertisements