Changeset 5836 for trunk/plugins/validate.password/demo/index.html

Timestamp:

08/20/08 12:12:12 (5 months ago)

Author:

joern.zaefferer

Message:

validate.password: much improved password strength meter, better integration with validation plugin

Files:

• trunk/plugins/validate.password/demo/index.html (modified) (5 diffs)

trunk/plugins/validate.password/demo/index.html

@@ -6 +6 @@
 
 <link rel="stylesheet" type="text/css" media="screen" href="milk.css" />
+<link rel="stylesheet" type="text/css" media="screen" href="../jquery.validate.password.css" />
 
 <script type="text/javascript" src="../../validate/lib/jquery.js"></script>
 <script type="text/javascript" src="../../validate/jquery.validate.js"></script>
 <script type="text/javascript" src="../jquery.validate.password.js"></script>
-
-<style type="text/css">
-.password-meter {
-    position:relative;
-    top: 20px;
-    background: #e0e0e0;
-    width: 180px;
-}
-.password-meter-bar {
-    height: 4px;
-}
-.password-meter-weak {
-    background: red;
-    width: 20px;
-}
-.password-meter-good {
-    background: blue;
-    width: 140px;
-}
-.password-meter-strong {
-    background: green;
-    width: 180px;
-}
-
-</style>
 
 <script id="demo" type="text/javascript">
@@ -46 +22 @@
             },
             password: {
-                required: true,
-                password: true
+                password: "#username"
             },
             password_confirm: {
@@ -59 +34 @@
                 minlength: jQuery.format("Enter at least {0} characters")
             },
-            password: {
-                required: "Provide a password",
-                rangelength: jQuery.format("Enter at least {0} characters")
-            },
             password_confirm: {
                 required: "Repeat your password",
@@ -71 +42 @@
         // the errorPlacement has to take the table layout into account
         errorPlacement: function(error, element) {
-            error.appendTo( element.parent().next() );
+            error.prependTo( element.parent().next() );
         },
         // specifying a submitHandler prevents the default submit, good for the demo
@@ -130 +101 @@
                 <td class="status">
                     <div class="password-meter">
-                        <div class="password-meter-bar"></div>
+                        <div class="password-meter-message">&nbsp;</div>
+                        <div class="password-meter-bg">
+                            <div class="password-meter-bar"></div>
+                        </div>
                     </div>
                 </td>