Note:

Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets.

About the Validation Confirm widget

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 retype 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.

You can also use a Validation Confirm widget in conjunction with a Validation Text Field widget to validate email addresses.

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 Spry 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:

Password field
A. A password field or Spry Password Validation widget B. 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, Validation Text Field widget, or Validation Password widget.

Required state

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

For a more comprehensive explanation of how Validation Confirm widgets work, as well as additional information about widget structure, see www.adobe.com/go/learn_dw_spryconfirm_en.

Insert and edit the Validation Confirm widget

Insert the Validation Confirm widget

  1. Select Insert > Spry > Spry Validation Confirm.
  2. Complete the Input Tag Accessibility Attributes dialog box and click OK.

Note:

You can also insert a Validation Confirm widget by using the Spry category in the Insert panel.

Change required status of a Validation Confirm widget

By default, all Validation Confirm widgets that you insert with Dreamweaver require user input when published on a web page. You can, however, make the completion of confirm text fields optional for the user.

  1. Select a Validation Confirm widget in the Document window by clicking its blue tab.
  2. In the Property inspector (Window > Properties), select or deselect the Required option, depending on your preference.

Specify the text field to validate against

  1. Select a Validation Confirm widget in the Document window by clicking its blue tab.
  2. In the Property inspector (Window > Properties), select the text field you want to validate against by selecting a text field from the Validate Against pop-up menu. All text fields with unique IDs assigned to them appear as options in the pop-up menu.

Display widget states in Design view

  1. Select a Validation Confirm widget in the Document window by clicking its blue tab.
  2. In the Property inspector (Window > Properties), select the state you want to see from the Preview States pop-up menu. For example, if you want to see the widget in its valid state, select Valid.

Specify when validation occurs

You can set the point at which validation occurs—when the site visitor clicks outside the widget, as the visitor types, or when the visitor tries to submit the form.

  1. Select a Validation Confirm widget in the Document window by clicking its blue tab.
  2. In the Property inspector (Window > Properties), select the option that indicates when you want validation to occur. You can select all of the options or Submit only.

    Blur

    Validates whenever the user clicks outside the confirm text field.

    Change

    Validates as the user changes text inside the confirm text field.

    Submit

    Validates when the user tries to submit the form. The submit option is selected by default, and cannot be deselected.

Customize the Confirm widget

Although the Property inspector enables you to make simple edits to a Validation Confirm widget, it does not support customized styling tasks. You can alter the CSS for the Validation Confirm widget so that you can create a widget that is styled to your liking. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_spryconfirm_custom_en.

All CSS rules in the topics below refer to the default rules located in the SpryValidationConfirm.css file. Dreamweaver saves the SpryValidationConfirm.css file in the SpryAssets folder of your site whenever you create a Spry Validation Confirm widget. Consulting this file is helpful because it contains commented information about various styles that apply to the widget.

Note:

Although you can easily edit rules for the Validation Confirm widget directly in the accompanying CSS file, you can also use the CSS Styles panel to edit the widget’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget, especially if you use the panel’s Current mode.

Style a Validation Confirm widget (general instructions)

  1. Open the SpryValidationConfirm.css file.

  2. Locate the CSS rule for the part of the widget to change. For example, to change the background color of the Confirm widget’s required state, edit the input.confirmRequiredState rule in the SpryValidationConfirm.css file.

  3. Make your changes to the CSS and save the file.

The SpryValidationConfirm.css file contains extensive comments, explaining the code and the purpose for certain rules. For further information, see the comments in the file.

Style Validation Confirm widget error message text

By default, error messages for the Validation Confirm widget appear in red with a 1-pixel solid border surrounding the text.

  • To change the text styling of Validation Confirm widget error messages, use the following table to locate the appropriate CSS rule, and then change the default properties, or add your own text-styling properties and values.

    Text to change

    Relevant CSS rule

    Relevant properties to change

    Error message text

    .confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg

    color: #CC3333; border: 1px solid #CC3333;

Change Validation Confirm widget background colors

  • To change the background colors of the Validation Confirm widget in various states, use the following table to locate the appropriate CSS rule, and then change the default background color values.

    Color to change

    Relevant CSS rule

    Relevant property to change

    Background color of widget in valid state

    .confirmValidState input, input.confirmValidState

    background-color: #B8F5B1;

    Background color of widget in invalid state

    input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input

    background-color: #FF9F9F;

    Background color of widget in focus

    .confirmFocusState input, input.confirmFocusState

    background-color: #FFFFCC;

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy