Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Jul 29th, 2012  |  syntax: None  |  size: 4.91 KB  |  hits: 14  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. jQuery Password Validation Doesn't Work Completely
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  3. "http://www.w3.org/TR/html4/strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  5.     <head>
  6.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7.         <title>Users</title>
  8.         <script src="js/jquery-1.7.2.js"></script>
  9.         <script src="js/login.js"></script>
  10.         <script src="js/buildsit.js"></script>
  11.         <script src="js/buttons.js"></script>
  12.         <script src="js/jquery.url.js"></script>
  13.         <link rel="stylesheet" type="text/css" media="screen" href="css/jquery.validate.password.css" />
  14.         <script type="text/javascript" src="js/jquery.validate.js"></script>
  15.         <script type="text/javascript" src="js/jquery.validate.password.js"></script>
  16.         <link type="text/css" rel="stylesheet" href="css/main.css" />
  17.         <meta name="author" content="rotem" />
  18. <script id="demo" type="text/javascript">
  19. $(document).ready(function() {
  20.  
  21.     console.debug("validate");
  22.     // validate signup form on keyup and submit
  23.     $("#changePwd").validate({
  24.         rules: {
  25.             prevPwd: {
  26.                 required: true,
  27.             },
  28.             newPwd: {
  29.                 required: true,
  30.                 password: "#prevPwd"
  31.             },
  32.             confPwd: {
  33.                 required: true,
  34.                 equalTo: "#newPwd"
  35.             }
  36.         },
  37.         messages: {
  38.             confPwd: {
  39.                 required: "Repeat your password",
  40.                 minlength: jQuery.format("Enter at least {0} characters"),
  41.                 equalTo: "Enter the same password as above"
  42.             }
  43.         },
  44.         // the errorPlacement has to take the table layout into account
  45.         errorPlacement: function(error, element) {
  46.             error.prependTo( element.parent().next() );
  47.         },
  48.         // specifying a submitHandler prevents the default submit, good for the demo
  49.         submitHandler: function() {
  50.             alert("submitted!");
  51.         },
  52.         // set this class to error-labels to indicate valid fields
  53.         success: function(label) {
  54.             // set &nbsp; as text for IE
  55.             console.debug("success!!!");
  56.             label.html("&nbsp;").addClass("checked");
  57.         }
  58.     });
  59.     console.debug("validate");
  60.     $("#newPwd").valid();
  61.     $("#confPwd").valid();
  62. });
  63. </script>
  64. <!-- Date: 2012-04-18 -->
  65. </head>
  66. <body>
  67.       <div class="wrap">
  68.         <div class="header">
  69.         </div>
  70.         <div class="contentContainer">
  71.             <div class="sideMenu">
  72.             </div>
  73.                     <div class="content">
  74.                         <form id="changPwd">
  75.                         <table>
  76.                         <tr>
  77.                         <td>
  78.                         <label for="email">Email:</label>
  79.                         </td>
  80.                         <td>
  81.                         <input type="text" id="email" name="email" value="admin"/>
  82.                         </td>
  83.                         </tr>
  84.                         <tr>
  85.                         <td>
  86.                         <label for="prevPwd">Previous Password:</label>
  87.                         </td>
  88.                         <td>
  89.                         <input id="prevPwd" name="prevPwd" type="password"/>
  90.                         </td>
  91.                         </tr>
  92.                         <tr>
  93.                         <td>
  94.                         <label for="newPwd">New Password:</label>
  95.                         </td>
  96.                         <td>
  97.                         <input id="newPwd" name="newPwd" type="password" class="password error"/>
  98.                         <label for="newPwd" generated="true" class="error" style="display: inline; "/>
  99.                         </td>
  100.                         <td>
  101.                         <div class="password-meter">
  102.                         <div class="password-meter-message password-meter-message-weak">Weak</div>
  103.                         <div id="passwordStrengthDiv" class="password-meter-bg">
  104.                         <div class="password-meter-bar password-meter-weak"/>
  105.                         </div>
  106.                         </div>
  107.                         </td>
  108.                         </tr>
  109.                         <tr>
  110.                         <td>
  111.                         <label for"confpwd"="">Confirm Password:</label>
  112.                         </td>
  113.                         <td>
  114.                         <input id="confPwd" name="confPwd" type="password"/>
  115.                         </td>
  116.                         </tr>
  117.                         <tr>
  118.                         <td/>
  119.                         <td>
  120.                         <input type="submit"/>
  121.                         </td>
  122.                         </tr>
  123.                         </table>
  124.                         </form>
  125.                         </div>
  126.             </div>
  127.             </div>
  128.         <script type="text/javascript">
  129.         buildSite();
  130.         buildEditUsers();
  131.         </script>
  132.         </body>
  133.     </html>