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

Working with the Spry Validation Radio Group widget
To the top
To the top
About the Validation Radio Group widget
Insert and edit the Validation Radio Group widget
Customize the Radio Group widget
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 Radio Group widget
The Validation Radio Group widget is a group of radio buttons with validation support for the selection. The widget enforces the selection of one
radio button from the group.
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.
307