Operation Manual

424

USING DREAMWEAVER

Building Spry pages visually

Last updated 3/28/2012

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).

You can alter the properties of these states using the Property inspector, depending on the desired validation results.

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 The widget state when the page loads in the browser, or when the user resets the form.

Focus state The widget state when the user places the insertion point in the widget.

Valid state The widget state when the user has entered information correctly, and the form can be submitted.

Required state The widget state when the user has failed to enter any text.

Minimum Number Of Characters state The widget state when the user has entered fewer than the minimum number

of characters required in the text area.

Maximum Number Of Characters state The widget state when the user has entered more 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 has not entered 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 CSS file

that accompanies the widget, SpryValidationTextArea.css.

The default HTML for the Validation Text Area widget, usually inside of a form, comprises a container <span> tag

that surrounds the <textarea> tag of the text area. The HTML for the Validation Text Area widget also includes script

tags in the head of the document and after the widget’s HTML markup.

For a more comprehensive explanation of how the Validation Text Area widget works, including a full anatomy of the

Validation Text Area widget’s code, see

www.adobe.com/go/learn_dw_sprytextarea.

Insert and edit the Validation Text Area widget

Insert the Validation Text Area widget

1 Select Insert > Spry > Spry Validation Textarea.