Operation Manual

430
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
Working with the Spry Validation Checkbox widget
About the Validation Checkbox widget
A Spry Validation Checkbox widget is a check box or group of check boxes in an HTML form that display valid or
invalid states when the user selects or fails to select a check box. For example, you can add a Validation Checkbox
widget to a form in which a user might be required to make three selections. If the user fails to make all three selections,
the widget returns a message stating that the minimum number of selections has not been met.
The following example shows a Validation Checkbox widget in various states:
A. Validation checkbox widget group, minimum number of selections state B. Validation Checkbox widget, required state
The Validation Checkbox widget includes a number of states (for example, valid, invalid, required value, and so on).
You can alter the properties of these states using the Property inspector, depending on the desired validation results.
A Validation Checkbox widget can validate at various points—for example, when the user clicks outside the widget, as
the user makes selections, or when the user tries to submit the form.
Initial state The widget state when the page loads in the browser, or when the user resets the form.
Valid state The widget state when the user has made a selection, or the correct number of selections, and the form can
be submitted.
Required state The widget state when the user has failed to make a required selection.
Minimum Number Of Selections state The widget state when the user has selected fewer than the minimum number
of check boxes required.
Maximum Number Of Selections state The widget state when the user has selected more than the maximum number
of check boxes allowed.
Background color to change Relevant CSS rule Relevant property to change
Background color of widget in valid state
.selectValidState select,
select.selectValidState
background-color: #B8F5B1;
Background color of widget in invalid state
select.selectRequiredState,
.selectRequiredState select,
select.selectInvalidState,
.selectInvalidState select
background-color: #FF9F9F;
Background color of widget in focus
.selectFocusState select,
select.selectFocusState
background-color: #FFFFCC;
A
B