Jquery Form Validation

Jquery form validation example.

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5.         <title></title>  
  6.   
  7.         <script type="text/javascript" src="js/jquery-1.6.2.js"></script>  
  8.         <script type="text/javascript" src="js/jquery.validate.js"></script>  
  9.   
  10.   
  11.         <link rel="stylesheet" type="text/css" href="css/style.css" />  
  12.   
  13.         <script>  
  14.             $(document).ready( function() {  
  15.                   
  16.                 $.validator.addMethod("nicFormatValidate", function(value, element){  
  17.   
  18.                     return this.optional(element) || /^\d{9}[VX]$/i.test(value);  
  19.                 }, "Please enter a valid nic");  
  20.   
  21.                 $("#addForm").validate( {  
  22.                     rules : {  
  23.   
  24.                         name : "required",  
  25.                         password : {  
  26.                             required : true,  
  27.                             minlength :8  
  28.                         },  
  29.                         email : {  
  30.                             required : true,  
  31.                             email : true  
  32.                         },  
  33.                         conEmail : {  
  34.                             required : true,  
  35.                             email : true,  
  36.                             equalTo:"#email"  
  37.                         },  
  38.                         nic:{  
  39.                             required :true,  
  40.                             nicFormatValidate :true  
  41.                         }  
  42.                     }  
  43.                 });  
  44.   
  45.             });  
  46.         </script>  
  47.   
  48.     </head>  
  49.     <body>  
  50.   
  51.         <form action="index.php" method="POST" id="addForm">  
  52.             <table border="0" width="100%">  
  53.                 <tr>  
  54.                     <td>Username</td>  
  55.                     <td></td>  
  56.                     <td><input type="text" name="name" value="" id="name"/></td>  
  57.                 </tr>  
  58.                 <tr>  
  59.                     <td>Password</td>  
  60.                     <td></td>  
  61.                     <td><input type="password" name="password" value="" id="password"/></td>  
  62.                 </tr>  
  63.                 <tr>  
  64.                     <td>Email</td>  
  65.                     <td></td>  
  66.                     <td><input type="text" name="email" value="" id="email"/></td>  
  67.                 </tr>  
  68.                 <tr>  
  69.                     <td>Confirm Email</td>  
  70.                     <td></td>  
  71.                     <td><input type="text" name="conEmail" value="" id="conEmail"/></td>  
  72.                 </tr>  
  73.                 <tr>  
  74.                     <td>NIC</td>  
  75.                     <td></td>  
  76.                     <td><input type="text" name="nic" value="" id="nic"/></td>  
  77.                 </tr>  
  78.                 <tr>  
  79.                     <td></td>  
  80.                     <td></td>  
  81.                     <td></td>  
  82.                 </tr>  
  83.                 <tr>  
  84.                     <td></td>  
  85.                     <td></td>  
  86.                     <td><input type="submit" value="Add" /></td>  
  87.                 </tr>  
  88.             </table>  
  89.         </form>  
  90.     </body>  
  91. </html>   

style.css

  1. @CHARSET "ISO-8859-1";  
  2. * {  
  3.     font-familyVerdana;  
  4.     font-size96%;  
  5. }  
  6.   
  7. label {  
  8.     width10em;  
  9.     floatleft;  
  10. }  
  11.   
  12. label.error {  
  13.     floatnone;  
  14.     colorred;  
  15.     padding-left: .5em;  
  16.     vertical-aligntop;  
  17. }  
  18.   
  19. p {  
  20.     clearboth;  
  21. }  
  22.   
  23. .submit {  
  24.     margin-left12em;  
  25. }  
  26.   
  27. em {  
  28.     font-weightbold;  
  29.     padding-right1em;  
  30.     vertical-aligntop;  
  31. }  




reference:

download library

No comments:

Post a Comment