- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title></title>
- <script type="text/javascript" src="js/jquery-1.6.2.js"></script>
- <script type="text/javascript" src="js/jquery.validate.js"></script>
- <link rel="stylesheet" type="text/css" href="css/style.css" />
- <script>
- $(document).ready( function() {
- $.validator.addMethod("nicFormatValidate", function(value, element){
- return this.optional(element) || /^\d{9}[VX]$/i.test(value);
- }, "Please enter a valid nic");
- $("#addForm").validate( {
- rules : {
- name : "required",
- password : {
- required : true,
- minlength :8
- },
- email : {
- required : true,
- email : true
- },
- conEmail : {
- required : true,
- email : true,
- equalTo:"#email"
- },
- nic:{
- required :true,
- nicFormatValidate :true
- }
- }
- });
- });
- </script>
- </head>
- <body>
- <form action="index.php" method="POST" id="addForm">
- <table border="0" width="100%">
- <tr>
- <td>Username</td>
- <td></td>
- <td><input type="text" name="name" value="" id="name"/></td>
- </tr>
- <tr>
- <td>Password</td>
- <td></td>
- <td><input type="password" name="password" value="" id="password"/></td>
- </tr>
- <tr>
- <td>Email</td>
- <td></td>
- <td><input type="text" name="email" value="" id="email"/></td>
- </tr>
- <tr>
- <td>Confirm Email</td>
- <td></td>
- <td><input type="text" name="conEmail" value="" id="conEmail"/></td>
- </tr>
- <tr>
- <td>NIC</td>
- <td></td>
- <td><input type="text" name="nic" value="" id="nic"/></td>
- </tr>
- <tr>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td></td>
- <td></td>
- <td><input type="submit" value="Add" /></td>
- </tr>
- </table>
- </form>
- </body>
- </html>
style.css
- @CHARSET "ISO-8859-1";
- * {
- font-family: Verdana;
- font-size: 96%;
- }
- label {
- width: 10em;
- float: left;
- }
- label.error {
- float: none;
- color: red;
- padding-left: .5em;
- vertical-align: top;
- }
- p {
- clear: both;
- }
- .submit {
- margin-left: 12em;
- }
- em {
- font-weight: bold;
- padding-right: 1em;
- vertical-align: top;
- }
reference:
download library
No comments:
Post a Comment