Spry

Validation Confirm widget overview and structure

The Validation Confirm Widget is a text field or a password form field that displays valid or invalid states when a user enters a value that does not match the value of a similar field in the same form. For example, you can add a Validation Confirm widget to a form that requires a user to re-type the password they've specified in a previous field. If the user fails to type the password exactly as they've specified it previously, the widget returns an error message stating that the values do not match.

Note: You should be familiar with Spry validation widgets before you work with the Confirm 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 illustration shows a typical setup for a Confirm widget:


The Validation Confirm widget includes a number of states (for example, valid, invalid, required, and so on). You can alter the properties of these states by editing the corresponding CSS file (SpryValidationConfirm.css), depending on the desired validation results. A Validation Confirm widget can validate at various points—for example, when the site visitor clicks outside the widget, 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 state
When the user enters text that does not match the text entered in a previous text field.

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

You create a Validation Confirm 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 Confirm widget: 

<head> 
...  
<!-- Link the Spry Validation Confirm JavaScript library --> 
<script src="SpryAssets/SpryValidationConfirm.js" type="text/javascript"></script> 
<!-- Link the CSS style sheet that styles the widget -->
<link href="SpryAssets/SpryValidationConfirm.css" rel="stylesheet" type="text/css" /> 
</head>
<body>
Password:<input type="password" name="password1" id="password1"/>
<span id="spryconfirm1">
	Confirm:<input type="password" name="confirm1" id="confirm1" />
	<span class="confirmRequiredMsg">A value is required.</span>
	<span class="confirmInvalidMsg">The values do not match</span>
</span>
...
<script type="text/javascript">
	var ConfirmWidgetObject = new Spry.Widget.ValidationConfirm("spryconfirm1", "password1", {validateOn: ['blur']});
</script>
</body>

In the code, the new JavaScript operator initializes the Confirm widget object, and transforms the span content with the ID of spryconfirm1 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.