Spry

Insert the Validation Confirm widget

  1. Locate the SpryValidationConfirm.js file and add it to your web site. You can find the SpryValidationConfirm.js file in the widgets/confirmvalidation directory, located in the Spry directory that you downloaded from Adobe Labs. For more information, see Prepare your files.

    For example, create a folder called SpryAssets in the root folder of your web site, and move the SpryValidationConfirm.js file to it. The SpryValidationConfirm.js file contains all of the information necessary for making the Confirm widget interactive.

  2. Locate the SpryValidationConfirm.css file and add it to your web site. You might choose to add it to the main directory, a SpryAssets directory, or to a CSS directory if you have one.
  3. Open the web page to add the Confirm widget to and link the SpryValidationConfirm.js file to the page by inserting the following script tag in the page’s head tag: 
    <script src="SpryAssets/SpryValidationConfirm.js" type="text/javascript"></script>

    Make sure that the file path to the SpryValidationConfirm.js file is correct. This path varies depending on where you’ve placed the file in your web site.

  4. Link the SpryValidationConfirm.css file to your web page by inserting the following link tag in the page’s head tag: 
    <link href="SpryAssets/SpryValidationConfirm.css" rel="stylesheet" type="text/css" />

    Make sure that the file path to the SpryValidationConfirm.css file is correct. This path varies depending on where you’ve placed the file in your web site.

  5. Add a password text field to the page and give it a name. This is the password that you will eventually want to confirm. 
    <input type="password" id="password1" name="password1" />
  6. Insert another password text field where the user will confirm the text of the first text field. 
    <input type="password" id="password1" name="password1" />
<input type="password" name="fieldName" value="" />
  7. To add a container around the Confirm widget, insert span tags around the second input tag, and assign a unique ID to the widget, as follows: 
    <input type="password" id="password1" name="password1"/>
<span id="ConfirmWidget">
	<input type="password" name="fieldName" value=""/>
</span>>
  8. Initialize the Confirm widget object by inserting the following script block after the HTML code for the widget: 
    <script type="text/javascript">
	var ConfirmWidgetObject = new Spry.Widget.ValidationConfirm("spryconfirm1", "password1");
</script>

    The first required value in the constructor is the ID of the widget container. The second required value is the ID of the password field that is being confirmed.

    Make sure that the ID of the Confirm widget’s container span tag matches the ID parameter you specified in the Spry.Widgets.ValidationConfirm method. Make sure that the JavaScript call comes after the HTML code for the widget.

  9. Save the page.

    The complete code looks as follows:

    <head>
...
<script src="includes/SpryValidationConfirm.js" type="text/javascript"></script>
<link href="includes/SpryValidationConfirm.css" rel="stylesheet" type="text/css" />
...
</head>
<body>
...
<input type="password" id="password1" name="password1" />
<span id="ConfirmWidget">
	<input type="password" name="fieldName" value=""/>
</span>
<script type="text/javascript">
	var ConfirmWidgetObject  = new Spry.Widget.ValidationConfirm("ConfirmWidget","password1");
</script>
...
</body>