A few days ago I blogged about Spry's password validation. It is an impressive little widget giving you nice control over how strong your password needs to be. Today I'm going to demonstrate the confirmation widget.
As you can guess - this is simply a widget that will enforce validation of a password. This widget can either work with a simple password field, or with Spry's password wdiget. Since I assume most folks will want to use both, my example will follow that format. As with the other widgets I covered - you include a JavaScript and CSS file:
<script src="/spryjs/SpryValidationConfirm.js" type="text/javascript"></script>
<link href="/sprycss/SpryValidationConfirm.css" rel="stylesheet" type="text/css" />
Then you create a span that will include your confirmation field along with the errors:
<span id="myconfirm">
Confirm Password: <input type="password" name="password2"><br />
<span class="confirmRequiredMsg">You must confirm the password, bozo.</span>
<span class="confirmInvalidMsg">Your confirmation password didn't match, idiot.</span>
</span>
And lastly you create a JavaScript variable that enables the validation:
var spryconfirm = new Spry.Widget.ValidationConfirm("myconfirm", "password");
Two things to note here. The first value is the ID of the confirmation span. The second value is the ID of the form field you are validating. Even though I'm using a Spry widget, I need to point to the field's ID value, not the span around it. As you can guess - the confirmRequiredMsg will be fired when the user doesn't enter anything, while the confirmInvalidMsg will fire if the passwords don't match at all.
Taking the last example from the previous post, here is a file that does both strict password checking as well as validation checking:
<html>
<head>
<script src="/spryjs/SpryValidationPassword.js" type="text/javascript"></script>
<link href="/sprycss/SpryValidationPassword.css" rel="stylesheet" type="text/css" />
<script src="/spryjs/SpryValidationConfirm.js" type="text/javascript"></script>
<link href="/sprycss/SpryValidationConfirm.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form>
<span id="mypassword">
Password: <input type="password" name="password" id="password"><br />
<span class="passwordRequiredMsg">You must specify a password.<br /></span>
<span class="passwordMinCharsMsg">You must specify at least 6 characters.<br /></span>
<span class="passwordInvalidStrengthMsg">You must use at least 2 numbers and 2 uppercase characters in your password.<br /></span>
</span>
<span id="myconfirm">
Confirm Password: <input type="password" name="password2"><br />
<span class="confirmRequiredMsg">You must confirm the password, bozo.</span>
<span class="confirmInvalidMsg">Your confirmation password didn't match, idiot.</span>
</span>
<input type="submit">
</form>
<script type="text/javascript">
var spryp = new Spry.Widget.ValidationPassword("mypassword",
{minChars:6,minNumbers:2,minUpperAlphaChars:2}
);
var spryconfirm = new Spry.Widget.ValidationConfirm("myconfirm", "password");
</script>
</body>
</html>
You can find an online demo of this here as well as the full docs here.