Yesterday I blogged about my initial look into Spry's form validation widgets. I began with the checkbox validation class. Today I looked at password field validation. As before, the widget is employed by loading in a JavaScript and CSS file, surrounding the form field with a span, and then lastly enabling the widget with a line of JavaScript code. Let's look at a very simple example of this:
<html>
<head>
<script src="/spryjs/SpryValidationPassword.js" type="text/javascript"></script>
<link href="/sprycss/SpryValidationPassword.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form>
<span id="mypassword">
Password: <input type="password" name="password">
<span class="passwordRequiredMsg">You must specify a password.</span>
</span>
<input type="submit">
</form>
<script type="text/javascript">
var spryp = new Spry.Widget.ValidationPassword("mypassword");
</script>
</body>
</html>
Since this is very similar to yesterday's blog post, I won't describe every line, but you can see where I have surrounded my password and then created a new instance of Spry.Widget.ValidationPassword. You can see an example of this here. Note as with the previous example, the error message within the span class is hidden on load. I can modify the look and feel of the error if I need to, but for now have left it with the default.
While this is nice and all - where things get interesting is the validation specifics we can apply to the widget. You can:
- Specify both a min and max number of characters for the password.
- Specify both a min and max number of letters for the password.
- Specify both a min and a max number of numbers for the password.
- Specify both a min and max number of upper case letters for the password.
- Specify both a min and max number of "special" characters for the password. (The docs don't detail what special is, but I assume they mean non-numeric, non-letter characters.
So here is one more example where the validaiton is more stringent:
<html>
<head>
<script src="/spryjs/SpryValidationPassword.js" type="text/javascript"></script>
<link href="/sprycss/SpryValidationPassword.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form>
<span id="mypassword">
Password: <input type="password" name="password">
<span class="passwordRequiredMsg">You must specify a password.</span>
<span class="passwordMinCharsMsg">You must specify at least 6 characters.</span>
<span class="passwordInvalidStrengthMsg">You must use at least 2 numbers and 2 uppercase characters in your password.</span>
</span>
<input type="submit">
</form>
<script type="text/javascript">
var spryp = new Spry.Widget.ValidationPassword("mypassword",
{minChars:6,minNumbers:2,minUpperAlphaChars:2}
);
</script>
</body>
</html>
Skip down to the end first. Note that I've added 3 options to the validation widget. I've specified that there must be at least 6 characters - there must be at least two numbers - and finally - there must be two upper case characters.
In order for these rules to work though I need to specify a few new spans for the error messages. The passwordMinChars message is obviously used to cover the case where not enough characters were specified. For all the rules that cover the type of characters required, you use the passwordInvalidStrengthMsg class. A demo of this file may be found here.
Finally - the complete docs for this feature may be found here.