Adobe Dreamweaver CC 2014 v.13 - Manual (Page 309)

To the top
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.
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.
302