Customize the Validation Text Field widget

The SpryValidationTextField.css file provides the default styling for the Validation Text Field widget. You can, however, customize the widget by changing the appropriate CSS rule. The CSS rules in the SpryValidationTextField.css file use the same class names as the related elements in the widget’s HTML code, so it’s easy for you to know which CSS rules correspond to the widget and its error states.

The SpryValidationTextField.css file should already be included in your website before you start customizing. For more information, see Prepare your files.

Style a Validation Text Field widget (general instructions)

Open the SpryValidationTextField.css file.
Locate the CSS rule for the part of the widget to change. For example, to change the background color of the Text Field widget’s required state, edit the .textfieldRequiredState rule in the SpryValidationTextField.css file.
Make your changes to the CSS and save the file.

The SpryValidationTextField.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 Text Field widget error message text

By default, error messages for the Validation Text Field widget appear in red with a 1-pixel solid border surrounding the text.

To change the text styling of Validation Text Field 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.

Text to change	Relevant CSS rule	Relevant properties to change
Error message text	.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg	color: #CC3333; border: 1px solid #CC3333;

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	.textfieldValidState input, input.textfieldValidState	background-color: #B8F5B1;
Background color of widget in invalid state	input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input	background-color: #FF9F9F;
Background color of widget in focus	.textfieldFocusState input, input.textfieldFocusState	background-color: #FFFFCC;

Specify custom patterns

The following table shows a full list of values used for custom patterns.

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

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:

<script type="text/javascript">
	var tf1 = new Spry.Widget.ValidationTextField("textfieldwidget1", "social_security_number", {format:"custom", pattern:"AA00AA"});
</script>

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.

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

Any characters (letters, punctuation, and so on) other than the backslash (\) and those listed in the preceding table are considered autocomplete characters, and Spry can insert these kinds of characters at the appropriate time. For example, if you have a zip code like UT.99CW, you might want to have Spry insert the period automatically after the user types the first two capital letters.

To use an autocomplete character, insert the character in the format pattern, as follows:

<script type="text/javascript">
	var tf1 = new Spry.Widget.ValidationTextField("textfieldwidget1", "zip_code", {format:"zip_custom", pattern:"AA.00AA"});
</script>

The preceding code results in a text field that accepts values such as UT.99CW, AB.87PP, GV.44RE, and so on, with the period appearing as an autocomplete character after the user types the first two capital letters.

You can also have Spry autocomplete letters (other than those in the preceding table), as in the following example:

<script type="text/javascript">
	var tf1 = new Spry.Widget.ValidationTextField("textfieldwidget1", "zip_code", {format:"zip_custom", pattern:"AA.00AAF3"});
</script>

The preceding code results in a text field that accepts values such as UT.99CWF3, AB.87PPF3, GV.44REF3, and so on, with the period appearing as an autocomplete character after the user types the first two capital letters, and the F3 appearing after the user types the last two capital letters.

To use any of the special characters listed in the preceding table as an autocomplete character, escape them with a double backslash (\\), as in the following example:

<script type="text/javascript">
	var tf1 = new Spry.Widget.ValidationTextField("textfieldwidget1", "zip_code", {format:"zip_custom", pattern:"AA.00AA\\B3"});
</script>

The preceding code results in a text field that accepts values such as UT.99CWB3, AB.87PPB3, GV.44REB3, and so on, with the period appearing as an autocomplete character after the user types the first two capital letters, and the B3 appearing after the user types the last two capital letters.

To use a backslash (\) as part of an autocomplete sequence, double it, and escape it using a double backslash—a total of four backslashes (\\\\)—as follows:

<script type="text/javascript">
	var tf1 = new Spry.Widget.ValidationTextField("textfieldwidget1", "zip_code", {format:"zip_custom", pattern:"AA\\\\00AA"});
</script>

The preceding code results in a text field that accepts values such as UT\99CW, AB\87PP, GV\44RE, and so on, with the backslash appearing as an autocomplete character after the user types the first two capital letters.

Customize state-related class names

While you can replace error-message-related class names with class names of your own by changing the rules in the CSS code and the class names in the HTML code, you cannot change or replace state-related class names, because the behaviors are hard-coded as part of the Spry framework. You can, however, override the default state-related class name with your own class name by specifying a new value in the third parameter of the widget constructor.

To change widget state-related class names, add one of the overriding options to the third parameter of the widget constructor, and specify your custom class name, as follows:

<script type="text/javascript">
	var tf1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {requiredClass:"required"});
</script>

The following table provides a list of options you can use to override built-in state-related class names.

Option	Description
requiredClass	Overrides the "textfieldRequiredState" built-in value
invalidFormatClass	Overrides the "textfieldInvalidFormatState" built-in value
validClass	Overrides the "textfieldValidState" built-in value
focusClass	Overrides the "textfieldFocusState" built-in value
invalidFormatClass	Overrides the "textfieldInvalidFormatState" built-in value
invalidRangeMinClass	Overrides the "textfieldMinValueState" built-in value
invalidRangeMaxClass	Overrides the "textfieldMaxValueState" built-in value
invalidCharsMinClass	Overrides the "textfieldMinCharsState" built-in value
invalidCharsMaxClass	Overrides the "textfieldMaxCharsState" built-in value
textfieldFlashTextClass	Overrides the "textfieldFlashText" built-in value