Spry User Guide - Support - Adobe

...
--Please select an item--
Item 1
Item 2
Invalid Item
Item 3
Empty Item
var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1");
Display error messages
❖ Create a span tag (or any other type of tag) to display the error message, and assign the appropriate class to it, as
follows:
--Please select an item--
Item 1
. . .
Please select an item.
The selectRequiredMsg ruleislocatedintheSpryValidationSelect.cssfile,andissettodisplay:none by default.
When the widget enters a different state through user interaction, Spry applies the appropriate class—the state
class—to the container of the widget. This action affects the error-message class, and by extension, the appearance
of the error message.
For example, the following shows a portion of the CSS rule from the SpryValidationSelect.css file:
.selectRequiredMsg, .selectInvalidMsg {
display: none;
}
.selectRequiredState .selectRequiredMsg,
.selectInvalidState .selectInvalidMsg {
display: inline;
color: #CC3333;
border: 1px solid #CC3333;
}
By default, no state class is applied to the widget container, so that when the page loads in a browser, the error
message text in the preceding HTML code example only has the .selectRequiredMsg class applied to it. (The
property and value pair for this rule is display:none, so the message remains hidden.) If the user fails to make a
selection, however, Spry applies the appropriate class to the widget container, as follows:
SPRY
User Guide
80