Jquery Form Validation

Jquery form validation example.

view plaincopy to clipboardprint?
  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

view plaincopy to clipboardprint?
  1. @CHARSET "ISO-8859-1";  
  2. * {  
  3.     font-family: Verdana;  
  4.     font-size: 96%;  
  5. }  
  6.   
  7. label {  
  8.     width: 10em;  
  9.     float: left;  
  10. }  
  11.   
  12. label.error {  
  13.     float: none;  
  14.     color: red;  
  15.     padding-left: .5em;  
  16.     vertical-align: top;  
  17. }  
  18.   
  19. p {  
  20.     clear: both;  
  21. }  
  22.   
  23. .submit {  
  24.     margin-left: 12em;  
  25. }  
  26.   
  27. em {  
  28.     font-weight: bold;  
  29.     padding-right: 1em;  
  30.     vertical-align: top;  
  31. }  




reference:
http://docs.jquery.com/Plugins/validation

download library
http://view.jquery.com/trunk/plugins/validate/jquery.validate.js
  Tuesday, October 04, 2011
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)