Operation Manual

436
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
Change Validation Password widget background colors
❖ To change the background colors of the Validation Password widget in various states, use the following table to
locate the appropriate CSS rule, and then change the default background color values.
Working with the Spry Validation Confirm widget
About the Validation Confirm widget
The Validation Confirm Widget is a text field or a password form field that displays valid or invalid states when a user
enters a value that does not match the value of a similar field in the same form. For example, you can add a Validation
Confirm widget to a form that requires a user to retype the password they've specified in a previous field. If the user
fails to type the password exactly as they've specified it previously, the widget returns an error message stating that the
values do not match.
You can also use a Validation Confirm widget in conjunction with a Validation Text Field widget to validate email
addresses.
Note: You should be familiar with Spry validation widgets before you work with the Confirm widget. If you’re not familiar
with them, see
“Working with the Spry Validation Text Field widget” on page 419, or any of the other validation widget
overviews before proceeding. This overview does not present all basic validation widget concepts.
The following illustration shows a typical setup for a Confirm widget:
A. A password field or Spry Password Validation widget B. Confirm widget
The Validation Confirm widget includes a number of states (for example, valid, invalid, required, and so on). You can
alter the properties of these states by editing the corresponding CSS file (SpryValidationConfirm.css), depending on
the desired validation results. A Validation Confirm widget can validate at various points—for example, when the site
visitor clicks outside the widget, when they type, or when they try 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.
Color to change Relevant CSS rule Relevant property to change
Background color of widget
in valid state
.passwordValidState input,
input.passwordValidState
background-color: #B8F5B1;
Background color of widget
in invalid state
input.passwordRequiredState,
.passwordRequiredState input,
input.passwordInvalidStrengthState,
.passwordInvalidStrengthState input,
input.passwordMinCharsState,
.passwordMinCharsState input,
input.passwordCustomState,
.passwordCustomState input,
input.passwordMaxCharsState,
.passwordMaxCharsState input
background-color: #FF9F9F;
Background color of widget
in focus
.passwordFocusState input,
input.passwordFocusState
background-color: #FFFFCC;
B
A