Javascript Forms Validation

Form validation works at server, after client had entered all the necessary details and then pressed submit button. JavaScript provides the facility to validate the form on the client side so processing will fasterthan server-side validation. So most of developer prefer client side form validation using JavaScript.

Example

<!DOCTYPE html>  
<html>  
<head>  
<script>  
functionform_validation(){    
var name=document.myform.name.value;    
//var x = document.forms["myform"]["name"].value;  
if (name==null || name==""){    
alert("Name can't be blank");    
return false;    
}    
}  
</script>  
</head>  
<body>  
<form name="myform" method="post" action="register.php" onsubmit="return form_validation()" >  
Name: <input type="text" name="name">  
<input type="submit" value="submit">  
</form>  
</body>  
</html>

Try Now

Another Example of Form validation

<!DOCTYPE html>  
<html>  
<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">Mail id</td>  
               <td><input type="text" name="Mail id" /></td>  
           </tr>       
           <tr>  
               <td align="right">Zip Code</td>  
               <td><input type="text" name="Zip" /></td>  
           </tr>  
           <tr>  
               <td align="right">City</td>  
               <td>  
                  <select name="City">  
                     <option value="-1" selected></option>  
                     <option value="1">New Delhi</option>  
                     <option value="2">Noida</option>  
                     <option value="3">Ghaziabad</option>  
                     <option value="4">Allahabad</option>  
                     <option value="5">Lucknow</option>  
                     <option value="6">Agra</option>  
                     <option value="7">Kanpur</option>  
                     <option value="8">Gurugram</option>  
                     <option value="9">Meerut</option>  
                  </select>  
               </td>  
           </tr>  
           <tr>  
               <td align="right">State</td>  
               <td>  
                  <select name="State">  
                     <option value="-1" selected></option>  
                     <option value="1">Uttar Pradesh</option>  
                     <option value="2">Madhya Pradesh</option>  
                     <option value="3">Bihar</option>  
                     <option value="4">Assam</option>  
                      <option value="5">Uttrakhand</option>  
                     <option value="6">Jharkhand</option>  
                     <option value="7">Gujrat</option>  
                     <option value="8">Haryana</option>  
                     <option value="9">Punjab</option>  
                  </select>  
               </td>  
           </tr>  
           <tr>  
               <td align="right">Country</td>  
               <td>  
                 <select name="Country">  
                     <option value="-1" selected></option>  
                     <option value="1">USA</option>  
                     <option value="2">UK</option>  
                     <option value="3">INDIA</option>  
                   <option value="2">FRANCE</option>  
                     <option value="2">CHINA</option>  
                     <option value="2">JAPAN</option>  
                     <option value="2">RUSSIA</option>  
                  </select>  
               </td>  
           </tr>              
           <tr>  
               <td align="right"></td>  
               <td><input type="submit" value="Submit" /></td>  
           </tr>              
         </table>  
      </form>        
   </body>  
</html>

Try Now