Spry

Validation Password widget overview and structure

The Spry Validation Password widget is a password text field that you can use to enforce password rules (for example, number and type of characters). The widget provides warning or error messages based upon a user's input.

Note: You should be familiar with Spry validation widgets before you work with the Password widget. If you’re not familiar with them, see Working with the Validation Text Field widget, or any of the other validation widget overviews before proceeding. This overview does not present all basic validation widget concepts.

The following example shows a Validation Password widget in various states:


A.
Password widget, minimum number of characters state

B.
Password widget, maximum number of characters state

C.
Password widget, required state

The Validation Password widget includes a number of states (for example, valid, required, minimum number of characters, and so on). You can alter the properties of these states by editing the corresponding CSS file (SpryValidationPassword.css), depending on the desired validation results. A Validation Password widget can validate at various points—for example, when the site visitor clicks outside the text field, when they type, or when they try to submit the form.

Initial state
When the page loads in the browser, or when the user resets the form.

Focus state
When the user places the insertion point in the widget.

Valid state
When the user enters information correctly, and the form can be submitted.

Invalid strength state
When the user enters text that does not match the strength criteria for the password text field. (For example, if you’ve specified that a password must contain at least two uppercase letters, and the entered password contains no or only one uppercase letter).

Required state
When the user fails to enter required text in the text field.

Minimum Number Of Characters state
When the user enters fewer than the minimum number of characters required in the password text field.

Maximum Number Of Characters state
When the user enters greater than the maximum number of characters allowed in the password text field.

You create a Validation Password widget by adding a few elements to a standard password text field. First you add an HTML tag container (for example, a <span> tag) around the text field. The container tag must have a unique ID, and any error messages for the widget must reside within this container. You also add a small constructor script after the HTML code for the widget.

Following is the HTML code for a Validation Password widget: 

<head> 
...  
<!-- Link the Spry Validation Password JavaScript library --> 
<script src="SpryAssets/SpryValidationPassword.js" type="text/javascript"></script> 
<!-- Link the CSS style sheet that styles the widget -->
<link href="SpryAssets/SpryValidationPassword.css" rel="stylesheet" type="text/css" /> 
</head>
<body>
<span id="sprypassword1">
	<input type="password" name="password1" id="password1" />
	<span class="passwordRequiredMsg">A value is required.</span>
	<span class="passwordMinCharsMsg">The minimum number of characters not met.</span>
	<span class="passwordMaxCharsMsg">The maximum number of characters exceeded.</span>
	<span class="passwordInvalidStrengthMsg">The password strength condition not met.</span>
	<span class="passwordCustomMsg">User defined condition not met.</span>
</span>
...
<script type="text/javascript">
	var sprypw1 = new Spry.Widget.ValidationPassword("sprypassword1");
</script>
</body>

In the code, the new JavaScript operator initializes the Password widget object, and transforms the span content with the ID of sprypassword1 from static HTML code into an interactive page element.

For a more comprehensive explanation of how validation widgets work, as well as additional information about widget structure, see Validation Text Field widget overview and structure.