Spry User Guide - Support - Adobe

Change Validation Text Field widget background colors
❖ To change the background colors of the Validation Text Field widget in various states, use the following table to
locate the appropriate CSS rule, and then change the default background color values.
Color to change Relevant CSS rule Relevant property to change
Background color of
widget in valid state
Background color of
widget in invalid state
Background color of
widget in focus
.textfieldValidState input, input.textfieldValidState background-color: #B8F5B1;
input.textfieldRequiredState, .textfieldRequiredState
input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState
input, input.textfieldMinValueState,
.textfieldMinValueState input, input.textfieldMaxValueState,
.textfieldMaxValueState input,
input.textfieldMinCharsState, .textfieldMin-
CharsState input, input.textfieldMaxCharsState,
.textfieldMaxCharsState input
Specify custom patterns
The following table shows a full list of values used for custom patterns.
Use these values to create a custom pattern for any of the format types. For example, to specify a custom social
security number that’s a combination of numbers and capital letters, specify the following custom pattern in the
constructor’s third parameter:
var textfieldwidget1 = new Spry.Widget.ValidationTextField("textfieldwidget1",
"social_security_number", {format:"custom", pattern:"AA00AA"});
The preceding code results in a text field that accepts values such as UT99CW, AB87PP, GV44RE, and so on.
Note: Dreamweaver users need only enter a custom pattern in the Pattern text box of the Property inspector, using the
values provided in the preceding table. For example, AA00AA.
Note: Spry’s validation mechanism supports only ASCII characters.
Insert autocomplete characters
The following table shows a full list of values used for custom patterns.
background-color: #FF9F9F;
.textfieldFocusState input, input.textfieldFocusState background-color: #FFFFCC;
Value Description
"0" Whole numbers between 0 and 9
"A" Uppercase alphabetic characters
"a" Lowercase alphabetic characters
"B"; "b" Case-insensitive alphabetic characters
"X" Uppercase alpha-numeric characters
"x" Lowercase alpha-numeric characters
"Y"; "y" Case-insensitive alpha-numeric characters
"?" Any character
SPRY
User Guide
63