Permalink
Browse files

validate.password: much improved password strength meter, better inte…

…gration with validation plugin

git-svn-id: http://jqueryjs.googlecode.com/svn/trunk/plugins/validate.password@5836 c715fcbe-d12f-0410-84c4-316a508785bb
  • Loading branch information...
1 parent 94404e0 commit b42ee87c6c10ff23590e571896c170c91184576a joern.zaefferer committed Aug 20, 2008
Showing with 76 additions and 54 deletions.
  1. +7 −33 demo/index.html
  2. +46 −0 jquery.validate.password.css
  3. +13 −7 jquery.validate.password.js
  4. +7 −3 test/index.html
  5. +3 −11 test/strength-meter.js
View
@@ -5,36 +5,12 @@
<title>jQuery Validation Plugin Password Extension demo</title>
<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">
$(document).ready(function() {
// validate signup form on keyup and submit
@@ -45,8 +21,7 @@
minlength: 2
},
password: {
- required: true,
- password: true
+ password: "#username"
},
password_confirm: {
required: true,
@@ -58,10 +33,6 @@
required: "Enter a username",
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",
minlength: jQuery.format("Enter at least {0} characters"),
@@ -70,7 +41,7 @@
},
// 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
submitHandler: function() {
@@ -129,7 +100,10 @@ <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-vali
<td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>
<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>
</tr>
@@ -0,0 +1,46 @@
+.password-meter {
+ position:relative;
+ width: 180px;
+}
+.password-meter-message {
+ text-align: right;
+ font-weight: bold;
+ color: #676767;
+}
+.password-meter-bg, .password-meter-bar {
+ height: 4px;
+}
+.password-meter-bg {
+ top: 8px;
+ background: #e0e0e0;
+}
+
+.password-meter-message-very-weak {
+ color: #aa0033;
+}
+.password-meter-message-weak {
+ color: #f5ac00;
+}
+.password-meter-message-good {
+ color: #6699cc;
+}
+.password-meter-message-strong {
+ color: #008000;
+}
+
+.password-meter-bg .password-meter-very-weak {
+ background: #aa0033;
+ width: 30px;
+}
+.password-meter-bg .password-meter-weak {
+ background: #f5ac00;
+ width: 60px;
+}
+.password-meter-bg .password-meter-good {
+ background: #6699cc;
+ width: 135px;
+}
+.password-meter-bg .password-meter-strong {
+ background: #008000;
+ width: 180px;
+}
@@ -40,9 +40,10 @@
}
$.validator.passwordRating.messages = {
+ "similar-to-username": "Too similar to username",
"too-short": "Too short",
- "very-weak": "Weak",
- "weak": "Fair",
+ "very-weak": "Very weak",
+ "weak": "Weak",
"good": "Good",
"strong": "Strong"
}
@@ -55,14 +56,19 @@
var rating = $.validator.passwordRating(password, username.val());
// update message for this field
- $.extend(this.settings.messages[element.name] || (this.settings.messages[element.name] = {}), {
- password: $.validator.passwordRating.messages[rating.messageKey]
- })
- $(".password-meter-bar").removeClass().addClass("password-meter-bar").addClass("password-meter-" + rating.messageKey);
+
+ var meter = $(".password-meter", element.form);
+
+ meter.find(".password-meter-bar").removeClass().addClass("password-meter-bar").addClass("password-meter-" + rating.messageKey);
+ meter.find(".password-meter-message")
+ .removeClass()
+ .addClass("password-meter-message")
+ .addClass("password-meter-message-" + rating.messageKey)
+ .text($.validator.passwordRating.messages[rating.messageKey]);
// display process bar instead of error message
return rating.rate > 2;
- }, "");
+ }, "&nbsp;");
// manually add class rule, to make username param optional
$.validator.classRuleSettings.password = { password: true };
View
@@ -3,8 +3,6 @@
<title>jQuery Validation Plugin Password Extension Test Suite</title>
<link rel="Stylesheet" media="screen" href="qunit/testsuite.css" />
<script type="text/javascript" src="../../validate/lib/jquery.js"></script>
- <script type="text/javascript" src="../lib/ui.core.js"></script>
- <script type="text/javascript" src="../lib/ui.progressbar.js"></script>
<script type="text/javascript" src="qunit/testrunner.js"></script>
<script type="text/javascript" src="../../validate/jquery.validate.js"></script>
<script type="text/javascript" src="../jquery.validate.password.js"></script>
@@ -23,7 +21,13 @@ <h2 id="userAgent"></h2>
<div id="main" style="display:none;">
<form id="form">
<input id="username" name="username" value="Peter" />
- <input class="required password" name="password" id="password" />
+ <input class="password" name="password" id="password" />
+ <div class="password-meter">
+ <div class="password-meter-message">&nbsp;</div>
+ <div class="password-meter-bg">
+ <div class="password-meter-bar"></div>
+ </div>
+ </div>
</form>
</div>
@@ -5,26 +5,19 @@ var messages = $.validator.passwordRating.messages;
function check(messageKey) {
input.valid();
- if (!messageKey) {
- equals( input.next(":visible").text(), $.validator.messages.required );
- } else {
- equals( input.next(":visible").text(), messages[messageKey] );
- }
+ equals( $("#form .password-meter-message").text(), messages[messageKey] );
}
test("basic password strength meter", function() {
$("#form").validate();
input = $("#password");
- check();
+ check("too-short");
input.val("a");
check("too-short");
- input.val("");
- check();
-
input.val("abc123@po");
check("strong");
});
@@ -36,13 +29,12 @@ test("check similar username", function() {
$("#form").validate({
rules: {
password: {
- required: true,
password: "#username"
}
}
});
- check();
+ check("too-short");
input.val("peterpeter");
check("similar-to-username");

0 comments on commit b42ee87

Please sign in to comment.