Customize the Validation Password widget

The SpryValidationPassword.css file provides the default styling for the Validation Password widget. You can, however, customize the widget by changing the appropriate CSS rule. The CSS rules in the SpryValidationPassword.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 SpryValidationPassword.css file should already be included in your website before you start customizing. For more information, see Prepare your files.

Style a Validation Password widget (general instructions)

Open the SpryValidationPassword.css file.
Locate the CSS rule for the part of the widget to change. For example, to change the background color of the Password widget’s required state, edit the input.passwordRequiredState rule in the SpryValidationPassword.css file.
Make your changes to the CSS and save the file.

The SpryValidationPassword.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 Password widget error message text

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

To change the text styling of Validation Password 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	.passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg	color: #CC3333; border: 1px solid #CC3333;

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.

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;

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 PasswordWidgetObject = new Spry.Widget.ValidationPassword("PasswordWidget", {requiredClass: "required", invalidClass: "invalid" ,validClass: "valid"});
</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 passwordRequiredState built-in value
invalidStrengthClass	Overrides the passwordInvalidStrengthState built-in value
validClass	Overrides the passwordValidState built-in value
focusClass	Overrides the passwordFocusState built-in value
invalidCharsMinClass	Overrides the passwordMinCharsState built-in value
invalidCharsMaxClass	Overrides the passwordMaxCharsState built-in value
additionalError	Lets you display error messages in a concentrated area on the page, inside an element whose ID is different from that of the widget container. When you use this option, all widget state classes that get applied to the main widget container are also applied to the additional element.