Spry User Guide - Support - Adobe

B
C
D
A. Characters remaining counter B. Text Area widget in focus, maximum number of characters state C. Text Area widget in focus, valid state
D. Text Area widget, required state E. Characters typed counter
The Validation Text Area widget includes a number of states (for example, valid, invalid, required value, and so on).
YoucanalterthepropertiesofthesestatesusingthePropertyinspector,dependingonthedesiredvalidationresults.
A Validation Text Area widget can validate at various points—for example, when the user clicks outside the widget,
as the user types, or when the user tries to submit the form.
Initial state When the page loads in the browser, or when the user resets the form.
Focus state When the user places the insertion point in the widget.
Valid state When the user enters information correctly, and the form can be submitted.
Required state When the user fails to enter any text.
Minimum Number Of Characters state When the user enters fewer than the minimum number of characters
required in the text area.
Maximum Number Of Characters state When the user enters greater than the maximum number of characters
allowed in the text area.
Whenever a Validation Text Area widget enters one of these states through user interaction, the Spry framework
logic applies a specific CSS class to the HTML container for the widget at run time. For example, if a user tries to
submit a form, but did not enter text in the text area, Spry applies a class to the widget that causes it to display the
error message, “A value is required.” The rules that control the style and display states of error messages exist in the
SpryValidationTextarea.css file that accompanies the widget.
The default HTML code for the Validation Text Area widget, usually inside a form, is made up of a container span
tag that surrounds the textarea tag of the text area. The HTML code for the Validation Text Area widget also
includes script tags in the head of the document and after the widget’s HTML code.
TheHTMLcodefortheValidationTextAreawidgetalsoincludesscript tags in the head of the document and after
the widget’s HTML code. The script tag in the head of the document defines all of the JavaScript functions related
to the Text Area widget. The script tag after the widget code creates a JavaScript object that makes the text area
interactive.
Following is the HTML code for a Validation Text Area widget:
A
E
SPRY
User Guide
66