Spry User Guide - Support - Adobe

The ID passed into the widget constructor identifies a specific HTML element. The constructor finds this element
and looks inside the identified container for a corresponding textarea tag. If the ID passed to the constructor is the
ID of the textarea tag (rather than a container tag), the constructor attaches validation triggers directly to the
textarea tag. If there is no container tag, however, the widget cannot display error messages, and different
validation states will only alter the appearance of the textarea tag element (for example, its background color).
Note: Multiple textarea tags do not work inside the same HTML widget container. Each text field should be its own
widget.
CSS code for the Validation Text Area widget
The SpryValidationTextarea.css file contains the rules that style the Validation Text Area widget and its error
messages. You can edit these rules to style the look and feel of the widget and error messages. The names of the rules
in the CSS file correspond to the names of the classes specified in the widget’s HTML code.
The following is the CSS code for the SpryValidationTextarea.css file:
/*Validation Textarea styling classes*/
.textareaRequiredMsg, .textareaMinCharsMsg, .textareaMaxCharsMsg, .textareaValidMsg {
display:none;
}
.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg{
display: inline;
color: #CC3333;
border: 1px solid #CC3333;
}
.textareaValidState textarea, textarea.textareaValidState {
background-color:#B8F5B1;
}
textarea.textareaRequiredState, .textareaRequiredState textarea,
textarea.textareaMinCharsState, .textareaMinCharsState textarea,
textarea.textareaMaxCharsState, .textareaMaxCharsState textarea {
background-color:#FF9F9F;
}
.textareaFocusState textarea, textarea.textareaFocusState {
background-color:#FFFFCC;
}
.textareaFlashState textarea, textarea.textareaFlashState{
color:red !important;
}
The SpryValidationTextField.css file also contains extensive comments, explaining the code and the purpose for
certain rules. For further information, see the comments in the file.
SPRY
User Guide
Insert the Validation Text Area widget
1 Locate the SpryValidationTextarea.js file and add it to your web site. You can find the SpryValidationTextarea.js
file in the widgets/textareavalidation 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 SpryValidationTextarea.js
file to it. The SpryValidationTextarea.js file contains all of the information necessary for making the Text Area
widget interactive.
68