Spry's Confirmation Validation

This post is more than 2 years old.

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Dan Vega posted on 10/27/2007 at 7:00 PM

Nice user friendly message " You must confirm the password, bozo. Your confirmation password didn't match, idiot." ha!

Comment 2 by JF posted on 3/21/2009 at 10:03 AM

Thanks for the posting, your example was easy to understand. Is their any way to use spry to confirm that the current password and the new password DO NOT match?

Comment 3 by Raymond Camden posted on 3/21/2009 at 5:26 PM

@JF: It has been a while, but I don't believe Spry has support for that. You would need to do it yourself.