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.