Spry User Guide - Support - Adobe

IntheCSSintheprecedingcode,youcanseethatthestaterulewiththecontextualselector.textareaRequired-
State . textareaRequiredMsg overrides the default error-message rule responsible for hiding the error message
text. Thus, when Spry applies the state class to the widget container, the state rule determines the appearance of the
widget, and displays the error message inline in red with a 1-pixel solid border.
Following is a list of default error-message classes and their descriptions. You can change these classes and rename
them to anything you want. If you do so, don’t forget to change them in the contextual selector also.
Error message class Description
.textareaRequiredMsg Causes error message to display when the widget enters
the required state
.textareaMinCharsMsg Causes error message to display when the widget enters
the minimum number of characters state
.textareaMaxCharsMsg Causes error message to display when the widget enters
the maximum number of characters state
.textareaValidMsg Causes error message to display when the widget enters
the valid state
Note: You cannot rename state-related class names because they are hard-coded as part of the Spry framework.
Specify when validation occurs
By default, the Validation Text Area widget validates when the user clicks the submit button. You can, however, set
two other options: blur or change. The validateOn:["blur"] parameter causes the widget to validate whenever
the user clicks outside the text area. The validateOn:["change"] parameter causes the widget to validate as the
user changes text inside the text area.
❖ To specify when validation occurs, add a validateOn parameter to the constructor as follows:
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1",
{validateOn:["blur"]});
As a convenience, you can discard the brackets if your validateOn parameter contains a single value (for example,
validateOn: "blur"). If the parameter contains both values, however (validateOn:["blur", "change"]),
include brackets in the syntax.
Specify a minimum and maximum number of characters
❖ To specify a minimum or maximum number of characters, add the minChars property or maxChars property (or
both) and a value to the constructor, as follows:
var textareawidget1 = new
Spry.Widget.ValidationTextarea("textareawidget1",{minChars:value, maxChars:value});
Add a character counter
You can add a character counter that lets your users know how many characters they have typed, or how many
characters are remaining when entering text in the text area.
1 Add a span tag after the textarea tag for the widget, and assign a unique ID to the tag, as follows:
SPRY
User Guide
71