Form Validation in JavaScript.

In this document, we have discussed JavaScript Form Validation using a sample registration form. The tutorial explores JavaScript validation on submit with detail explanation.
Following pictorial shows in which field, what validation we want to impose.



<html>  
<head>    
 <title>Form Validation</title>
   
      <!-- // JavaScripts for confirmation validation/// -->
<script>
      // 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>
   
   </head>       <body>
      <form action="somePHPpage.php" 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="email" 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">PAKISTAN</option>
                     <option value="2">CHINA</option>
                     <option value="3">TURKEY</option>
                  </select>
       </td>         </tr>  
       <tr>
               <td align="right"></td>
               <td><input type="submit" value="Submit" /></td>
       </tr>    
</table>    
</form>  
</body>  
</html>

Comments

Post a Comment

Popular posts from this blog

Linear Search in C++

Image
Linear Search in C++ To search any element present inside the array in C++ programming using linear search technique, you have ask to the user to enter the array size and array elements to store the elements in the array. Now ask to the user to enter the element that he/she want to check or search whether the entered number/element is present in the array or not. To check/search for the element, just compare with the number to each element present in the array if any element equal to the entered number then print the exact position of the number in the array as shown here in the following program. C++ Programming Code for Linear Search Following C++ program first ask to the user to enter the array size then it will ask to enter the array elements, then it will finally ask to enter a number to be search in the given array to check whether it is present in the array or not, if it is present then at which position : /* C++ Program - Linear Search */ #include<iostream.h...
Read more

Advance Calculator in JavaScript

Image
<!DOCTYPE html> <html> <body> <script language="JavaScript">     Memory  = "0";      // initialise memory variable     Current = "0";      //   and value of Display ("current" value)     Operation = 0;      // Records code for eg * / etc.     MAXLENGTH = 30;     // maximum number of digits before decimal! function AddDigit(dig)          //ADD A DIGIT TO DISPLAY (keep as 'Current')  { if (Current.indexOf("!") == -1)  //if not already an error     { if (    (eval(Current) == 0)               && (Current.indexOf(".") == -1)          ) { Current = dig;            } else            { Current = Current + dig;            };   ...
Read more