Operation Manual

429
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
Prohibit or allow blank values
By default, all Validation Select widgets that you insert with Dreamweaver require that users select menu items that
have an associated value when the widget is published on a web page. You can, however, disable this option.
1 Select a Validation Select widget in the Document window.
2 In the Property inspector (Window > Properties), select or deselect the Do Not Allow Blank Values option,
depending on your preference.
Specify an invalid value
You can specify a value that will register as invalid if the user selects a menu item that is associated with that value. For
example, if you specify -1 as an invalid value, and you assign the value to an option tag, the widget will return an error
message if the user selects that menu item.
<option value="-1"> ------------------- </option>
1 Select a Validation Select widget in the Document window.
2 In the Property inspector (Window > Properties), enter a number to use as in invalid value in the Invalid Value box.
Customize the Validation Select widget
Although the Property inspector enables you to make simple edits to a Validation Select widget, it does not support
customized styling tasks. You can alter the CSS for the Validation Select widget so that you can create a widget that is
styled to your liking.
All CSS rules in the topics below refer to the default rules located in the SpryValidationSelect.css file. Dreamweaver
saves the SpryValidationSelect.css file in the SpryAssets folder of your site whenever you create a Spry Validation Select
widget. Consulting this file is helpful because it contains commented information about various styles that apply to the
widget.
Although you can easily edit rules for the Validation Select 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
“The CSS Styles panel in Current mode” on page 121
Style Validation Select widget error message text
By default, error messages for the Validation Select widget appear in red with a 1-pixel border surrounding the text.
❖ To change the text styling of Validation Select widget error messages, 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:
Change Validation Select widget background colors
❖ To change the background colors of the Validation Select widget in various states, use the following table to locate
the appropriate CSS rule, and then change the default background color values:
Text to style Relevant CSS rule Relevant properties to change
Error message text
.selectRequiredState .selectRequiredMsg,
.selectInvalidState .selectInvalidMsg
color: #CC3333; border: 1px solid #CC3333;