Adobe Dreamweaver CC 2014 v.13 User Manual
Page 307
Specify when validation occurs
You can set the point at which validation occurs—when the user clicks outside the widget, as the user makes selections, or when the user tries to
submit the form.
1. Select a Validation Checkbox 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 check box.
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.
Specify a minimum and maximum selection range
By default, a Validation Checkbox widget is set to required by default. If you insert a number of check boxes on your page, however, you can
specify a minimum and maximum selection range. For example, if you have six check boxes within the tag for a single Validation
Checkbox widget, and you want to make sure that the user selects at least three check boxes, you can set such a preference for the entire widget.
1. Select a Validation Checkbox widget in the Document window.
2. In the Property inspector (Window > Properties), select the Enforce Range option.
3. Enter a minimum or maximum number (or both) of check boxes that you want the user to select.
Display widget states in Design view
1. Select a Validation Checkbox 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, select
Initial to see the widget in its initial state.
Customize Validation Checkbox widget error messages
By default, error messages for the Validation Checkbox widget appear in red with a 1-pixel border surrounding the text. You can alter the CSS for
the Validation Checkbox widget so that you can create a widget that is styled to your liking. For a more advanced list of styling tasks, see
1. Open the SpryValidationCheckbox.css file.
Dreamweaver saves the SpryValidationCheckbox.css file in the SpryAssets folder of your site whenever you create a Spry Validation
Checkbox widget. It’s helpful to consult this file because it contains commented information about various styles that apply to the widget.
2. Use the following table to locate the appropriate CSS rule, and then change the default properties, or add your own text-styling properties
and values:
Text to style
Relevant CSS rule
Relevant properties to change
Error message text
.checkboxRequiredState
.checkboxRequiredMsg,
.checkboxMinSelectionsState
.checkboxMinSelectionsMsg,
.checkboxMaxSelectionsState
.checkboxMaxSelectionsMsg
color: #CC3333; border: 1px solid
#CC3333;
Although you can easily edit rules for the Validation Checkbox widget directly in the accompanying CSS file, you can also use the CSS
Styles panel to edit the widget’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the
widget, especially if you use the panel’s Current mode.
More Help topics
300