Spry User Guide - Support - Adobe

Specify an invalid value
Youcanspecifyavaluethatregistersasinvalidiftheuserselectsamenuitemthatisassociatedwiththatvalue.For
example, if you specify -1 as an invalid value, and you assign the value to an option tag, the widget returns an error
message if the user selects that menu item.
1 Assign a negative value to an option tag, for example:
-------------------
2 Add the invalid option and the value you specified to the widget constructor, as follows:
var selectwidget1 = new Spry.Widget.ValidationSelect("selectwidget1", {invalidValue:"-
1"});
Customize the Validation Select widget
The SpryValidationSelect.css file provides the default styling for the Validation Select widget. You can, however,
customize the widget by changing the appropriate CSS rule. The CSS rules in the SpryValidationSelect.css file use
the same class names as the related elements in the widget’s HTML code, so it’s easy for you to know which CSS rules
correspond to the widget and its error states.
The SpryValidationSelect.css file should already be included in your website before you start customizing. For more
information, see “Prepare your files” on page 3.
Style a Validation Select widget (general instructions)
1 Open the SpryValidationSelect.css file.
2 LocatetheCSSruleforthepartofthewidgettochange.Forexample,tochangethebackgroundcoloroftheSelect
widget’s required state, edit the .selectRequiredState rule in the SpryValidationSelect.css file.
3 Make your changes to the CSS rule and save the file.
The SpryValidationSelect.css file contains extensive comments, explaining the code and the purpose for certain
rules. For further information, see the comments in the file.
SPRY
User Guide
Style Validation Select widget error message text
By default, error messages for the Validation Select widget appear in red with a 1-pixel solid 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.
Text to style Relevant CSS rule Relevant properties to change
Error message text .selectRequiredState .selectRequiredMsg,
.selectInvalidState
.selectInvalidMsg
color: #CC3333; border: 1px solid
#CC3333;
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.
82