Spry User Guide - Support - Adobe

...
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1");
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 enter a description
The .textareaRequiredMsg rule is located in the SpryValidationTextarea.css file, and is set to display: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 from the SpryValidationTextarea.css file:
.textareaRequiredMsg,
.textareaMinCharsMsg,
.textareaMaxCharsMsg,
.textareaValidMsg {
display:none;
}
.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg {
display: inline;
color: #CC3333;
border: 1px solid #CC3333;
}
By default, there is no state class 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 .textareaRequiredMsg class applied to it. (The
propertyandvaluepairforthisruleisdisplay:none, so the message remains hidden.) If the user fails to enter text
in a required text area, however, Spry applies the appropriate class to the widget container, as follows:
Please enter a description
SPRY
User Guide
70