codenotifier - jQuery: revision 5836

Project: jQuery

Revision: 5836

Author: joern.zaefferer

Date: 20 Aug 2008 08:12:12

Diff at Trac: http://dev.jquery.com/changeset/5836

Changes:

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

Files:
modified: /trunk/plugins/validate.password/test/strength-meter.js (try)
modified: /trunk/plugins/validate.password/jquery.validate.password.js (try)
modified: /trunk/plugins/validate.password/test/index.html (try)
modified: /trunk/plugins/validate.password/demo/index.html (try)
added: /trunk/plugins/validate.password/jquery.validate.password.css (try)

Diff:

/trunk/plugins/validate.password/test/strength-meter.js

/trunk/plugins/validate.password/jquery.validate.password.js

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

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

/trunk/plugins/validate.password/jquery.validate.password.css

To list

......	@@ -5,11 +5,7 @@
5	5
6	6	function check(messageKey) {
7	7	input.valid();
8		if (!messageKey) {
9		equals( input.next(":visible").text(), $.validator.messages.required );
10		} else {
11		equals( input.next(":visible").text(), messages[messageKey] );
12		}
	8	equals( $("#form .password-meter-message").text(), messages[messageKey] );
13	9	}
14	10
15	11	test("basic password strength meter", function() {
......	@@ -17,14 +13,11 @@
17	13	$("#form").validate();
18	14
19	15	input = $("#password");
20		check();
	16	check("too-short");
21	17
22	18	input.val("a");
23	19	check("too-short");
24	20
25		input.val("");
26		check();
27
28	21	input.val("abc123@po");
29	22	check("strong");
30	23	});
......	@@ -36,13 +29,12 @@
36	29	$("#form").validate({
37	30	rules: {
38	31	password: {
39		required: true,
40	32	password: "#username"
41	33	}
42	34	}
43	35	});
44	36
45		check();
	37	check("too-short");
46	38
47	39	input.val("peterpeter");
48	40	check("similar-to-username");

......	@@ -40,9 +40,10 @@
40	40	}
41	41
42	42	$.validator.passwordRating.messages = {
	43	"similar-to-username": "Too similar to username",
43	44	"too-short": "Too short",
44		"very-weak": "Weak",
45		"weak": "Fair",
	45	"very-weak": "Very weak",
	46	"weak": "Weak",
46	47	"good": "Good",
47	48	"strong": "Strong"
48	49	}
......	@@ -55,14 +56,19 @@
55	56
56	57	var rating = $.validator.passwordRating(password, username.val());
57	58	// update message for this field
58		$.extend(this.settings.messages[element.name] \|\| (this.settings.messages[element.name] = {}), {
59		password: $.validator.passwordRating.messages[rating.messageKey]
60		})
61		$(".password-meter-bar").removeClass().addClass("password-meter-bar").addClass("password-meter-" + rating.messageKey);
	59
	60	var meter = $(".password-meter", element.form);
	61
	62	meter.find(".password-meter-bar").removeClass().addClass("password-meter-bar").addClass("password-meter-" + rating.messageKey);
	63	meter.find(".password-meter-message")
	64	.removeClass()
	65	.addClass("password-meter-message")
	66	.addClass("password-meter-message-" + rating.messageKey)
	67	.text($.validator.passwordRating.messages[rating.messageKey]);
62	68	// display process bar instead of error message
63	69
64	70	return rating.rate > 2;
65		}, "");
	71	}, " ");
66	72	// manually add class rule, to make username param optional
67	73	$.validator.classRuleSettings.password = { password: true };
68	74

......	@@ -3,8 +3,6 @@
3	3	<title>jQuery Validation Plugin Password Extension Test Suite</title>
4	4	<link rel="Stylesheet" media="screen" href="qunit/testsuite.css" />
5	5	<script type="text/javascript" src="../../validate/lib/jquery.js"></script>
6		<script type="text/javascript" src="../lib/ui.core.js"></script>
7		<script type="text/javascript" src="../lib/ui.progressbar.js"></script>
8	6	<script type="text/javascript" src="qunit/testrunner.js"></script>
9	7	<script type="text/javascript" src="../../validate/jquery.validate.js"></script>
10	8	<script type="text/javascript" src="../jquery.validate.password.js"></script>
......	@@ -23,7 +21,13 @@
23	21	<div id="main" style="display:none;">
24	22	<form id="form">
25	23	<input id="username" name="username" value="Peter" />
26		<input class="required password" name="password" id="password" />
	24	<input class="password" name="password" id="password" />
	25	<div class="password-meter">
	26	<div class="password-meter-message"> </div>
	27	<div class="password-meter-bg">
	28	<div class="password-meter-bar"></div>
	29	</div>
	30	</div>
27	31	</form>
28	32	</div>
29	33

......	@@ -5,36 +5,12 @@
5	5	<title>jQuery Validation Plugin Password Extension demo</title>
6	6
7	7	<link rel="stylesheet" type="text/css" media="screen" href="milk.css" />
	8	<link rel="stylesheet" type="text/css" media="screen" href="../jquery.validate.password.css" />
8	9
9	10	<script type="text/javascript" src="../../validate/lib/jquery.js"></script>
10	11	<script type="text/javascript" src="../../validate/jquery.validate.js"></script>
11	12	<script type="text/javascript" src="../jquery.validate.password.js"></script>
12	13
13		<style type="text/css">
14		.password-meter {
15		position:relative;
16		top: 20px;
17		background: #e0e0e0;
18		width: 180px;
19		}
20		.password-meter-bar {
21		height: 4px;
22		}
23		.password-meter-weak {
24		background: red;
25		width: 20px;
26		}
27		.password-meter-good {
28		background: blue;
29		width: 140px;
30		}
31		.password-meter-strong {
32		background: green;
33		width: 180px;
34		}
35
36		</style>
37
38	14	<script id="demo" type="text/javascript">
39	15	$(document).ready(function() {
40	16	// validate signup form on keyup and submit
......	@@ -45,8 +21,7 @@
45	21	minlength: 2
46	22	},
47	23	password: {
48		required: true,
49		password: true
	24	password: "#username"
50	25	},
51	26	password_confirm: {
52	27	required: true,
......	@@ -58,10 +33,6 @@
58	33	required: "Enter a username",
59	34	minlength: jQuery.format("Enter at least {0} characters")
60	35	},
61		password: {
62		required: "Provide a password",
63		rangelength: jQuery.format("Enter at least {0} characters")
64		},
65	36	password_confirm: {
66	37	required: "Repeat your password",
67	38	minlength: jQuery.format("Enter at least {0} characters"),
......	@@ -70,7 +41,7 @@
70	41	},
71	42	// the errorPlacement has to take the table layout into account
72	43	errorPlacement: function(error, element) {
73		error.appendTo( element.parent().next() );
	44	error.prependTo( element.parent().next() );
74	45	},
75	46	// specifying a submitHandler prevents the default submit, good for the demo
76	47	submitHandler: function() {
......	@@ -129,7 +100,10 @@
129	100	<td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>
130	101	<td class="status">
131	102	<div class="password-meter">
132		<div class="password-meter-bar"></div>
	103	<div class="password-meter-message"> </div>
	104	<div class="password-meter-bg">
	105	<div class="password-meter-bar"></div>
	106	</div>
133	107	</div>
134	108	</td>
135	109	</tr>

......	@@ -0,0 +1,46 @@
	1	.password-meter {
	2	position:relative;
	3	width: 180px;
	4	}
	5	.password-meter-message {
	6	text-align: right;
	7	font-weight: bold;
	8	color: #676767;
	9	}
	10	.password-meter-bg, .password-meter-bar {
	11	height: 4px;
	12	}
	13	.password-meter-bg {
	14	top: 8px;
	15	background: #e0e0e0;
	16	}
	17
	18	.password-meter-message-very-weak {
	19	color: #aa0033;
	20	}
	21	.password-meter-message-weak {
	22	color: #f5ac00;
	23	}
	24	.password-meter-message-good {
	25	color: #6699cc;
	26	}
	27	.password-meter-message-strong {
	28	color: #008000;
	29	}
	30
	31	.password-meter-bg .password-meter-very-weak {
	32	background: #aa0033;
	33	width: 30px;
	34	}
	35	.password-meter-bg .password-meter-weak {
	36	background: #f5ac00;
	37	width: 60px;
	38	}
	39	.password-meter-bg .password-meter-good {
	40	background: #6699cc;
	41	width: 135px;
	42	}
	43	.password-meter-bg .password-meter-strong {
	44	background: #008000;
	45	width: 180px;
	46	}
0	47	\ No newline at end of file