Operation Manual

428
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
Whenever a Validation Select widget enters one of the above states through user interaction, the Spry framework logic
applies a specific CSS class to the HTML container for the widget at run time. For example, if a user tries to submit a
form, but has not selected an item from the menu, Spry applies a class to the widget so that it displays the error message,
“Please select an item.” The rules that control the style and display states of error messages reside in the CSS file that
accompanies the widget, SpryValidationSelect.css.
The default HTML for the Validation Select widget, usually inside of a form, comprises a container <span> tag that
surrounds the <select> tag of the text area. The HTML for the Validation Select widget also includes script tags in the
head of the document and after the widget’s HTML markup.
For a more comprehensive explanation of how the Validation Select widget works, including a full anatomy of the
Validation Select widget’s code, see
www.adobe.com/go/learn_dw_spryselect.
Insert and edit the Validation Select widget
Insert the Validation Select widget
1 Select Insert > Spry > Spry Validation Select.
2 Complete the Input Tag Accessibility Attributes dialog box and click OK.
3 In Code view, add option tags that contain menu items and values. Dreamweaver does not do this for you
automatically. For more information, see the previous topic.
Note: You can also insert a Validation Select widget by using the Spry category in the Insert panel.
More Help topics
“Create accessible HTML forms” on page 638
Specify when validation occurs
You can set the point at which validation occurs—when the user clicks outside the widget, as the user types, or when
the user tries to submit the form.
1 Select a Validation Select widget in the Document window.
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 widget.
Change Validates as the user makes selections.
Submit Validates when the user tries to submit the form. The submit option is selected by default, and cannot be
deselected.
Display widget states in Design view
1 Select a Validation Select widget in the Document window.
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.