Teach with us

How to do basic form validation using JavaScript?

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>
Updated on 19-Jun-2020 08:56:24

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements