Operation Manual

419

USING DREAMWEAVER

Building Spry pages visually

Last updated 3/28/2012

The SpryValidationRadio.css file contains extensive comments, explaining the code and the purpose for certain rules.

For further information, see the comments in the file.

Style Validation Radio Group widget error message text

By default, error messages for the Validation Radio Group widget appear in red with a 1-pixel solid border

surrounding the text.

❖ To change the text styling of Validation Radio Group widget error messages, use the following table to locate the

appropriate CSS rule, and then change the default properties, or add your own text-styling properties and values.

Working with the Spry Validation Text Field widget

About the Validation Text Field widget

A Spry Validation Text Field widget is a text field that displays valid or invalid states when the site visitor enters text.

For example, you can add a Validation Text Field widget to a form in which visitors type their e-mail addresses. If they

fail to type the “@” symbol and a period in the e-mail address, the widget returns a message stating that the information

the user entered is invalid.

The following example shows a Validation Text Field widget in various states:

A. Textfield widget, hint activated B. Textfield widget, valid state C. Textfield widget, invalid state D. Textfield widget, required state

The Validation Text Field 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 Field widget can validate at various points—for example, when the visitor clicks outside the widget,

when they type, or when they try 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.

Invalid state The widget state when the user has entered text in an invalid format. (For example, 06 for a year instead

of 2006).

Text to style Relevant CSS rule Relevant properties to change

Error message text

.radioRequiredState

.radioRequiredMsg,

.radioInvalidState

.radioInvalidMsg

color: #CC3333; border: 1px solid #CC3333;