Operation Manual

416
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
The following example shows a Validation Radio Group widget in various states.
A. Validation Radio Group widget error messages B. Validation Radio Group widget group
The Validation Radio Group widget includes three states beyond the initial state: valid, invalid, and required value.
You can alter the properties of these states by editing the corresponding CSS file (SpryValidationRadio.css), depending
on the desired validation results. A Validation Radio Group widget can validate at various points: when the user clicks
outside the widget, as the user makes selections, or when the user tries to submit the form.
Initial state When the page loads in the browser, or when the user resets the form.
Valid state When the user makes a selection, and the form can be submitted.
Required state When the user fails to make a required selection.
Invalid state When the user selects a radio button whose value is not acceptable.
Whenever a Validation Radio Group widget enters one of these 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 makes no selections, Spry applies a class to the widget that causes it to display the error message, “Please
make a selection.” The rules that control the style and display states of error messages reside in the file that
accompanies the widget, SpryValidationRadio.css.
The default HTML code for the Validation Radio Group widget, usually inside a form, is made up of a container span
tag that surrounds the
input type="radio" tag of the radio group. The HTML code for the Validation Radio Group
widget also includes
script tags in the head of the document and after the widget’s HTML code.
For a more comprehensive explanation of how the Validation Radio Group widget works, including a full anatomy of
the Validation Radio Group widget’s code, see
www.adobe.com/go/learn_dw_spryradio_en.
Insert and edit the Validation Radio Group widget
Insert the Validation Radio Group widget
1 Select Insert > Spry > Spry Validation Radio Group.
2 In the Name text box, enter a name for the radio group.
3 Add or subtract radio buttons from the group by clicking the plus (+) or minus (-) buttons.
4 In the Label column, click the name of each radio button to make the field editable, and assign unique names to
each radio button.
5 In the Value column, click each value to make the field editable, and assign a unique value to each radio button.
6 (Optional) Click a radio button or its value to select a specific row, and then click the up and down arrows to move
the row up or down.
B
A