Spry User Guide - Support - Adobe

*Validation Select styling classes*/
.selectRequiredMsg, .selectInvalidMsg {
display: none;
}
.selectRequiredState .selectRequiredMsg,
.selectInvalidState .selectInvalidMsg {
display: inline;
color: #CC3333;
border: 1px solid #CC3333;
}
.selectValidState select, select.selectValidState {
background-color: #B8F5B1;
}
select.selectRequiredState, .selectRequiredState select,
select.selectInvalidState, .selectInvalidState select {
background-color: #FF9F9F;
}
.selectFocusState select, select.selectFocusState {
background-color: #FFFFCC;
}
The SpryValidationSelect.css file also contains extensive comments, explaining the code and the purpose for certain
rules. For further information, see the comments in the file.
Insert the Validation Select widget
1 Locate the SpryValidationSelect.js file and add it to your web site. You can find the SpryValidationSelect.js file in
the widgets/selectvalidation directory, located in the Spry directory that you downloaded from Adobe Labs. For
more information, see “Prepare your files” on page 3.
For example, create a folder called SpryAssets in the root folder of your web site, and upload the SpryValidation-
Select.js file to it. The SpryValidationSelect.js file contains all of the information necessary for making the Select
widget interactive.
2 Locate the SpryValidationSelect.css file and add it to your web site. You might choose to add it to the main
directory, a SpryAssets directory, or to a CSS directory if you have one.
3 Open the web page to add the Select widget to and link the SpryValidationSelect.js file to the page by inserting the
following script tag in the page’s head tag:
Make sure that the file path to the SpryValidationSelect.js file is correct. This path varies depending on where you’ve
placed the file in your web site.
4 Link the SpryValidationSelect.css file to your web page by inserting the following link tag in the page’s head tag:
MakesurethatthefilepathtotheSpryValidationSelect.cssfileiscorrect.Thispathvariesdependingonwhereyou’ve
placed the file in your web site.
5 Add a select list to the page and give it a name and a unique ID:
6 Add options to the select list, as follows:
SPRY
User Guide
78