Adobe Dreamweaver CC 2014 v.13 - Manual (Page 312)

To the top
2. In the Property inspector (Window > Properties), select or deselect the Required option, depending on your preference.
Display widget states in Design view
1. Select a Validation Password widget in the Document window by clicking its blue tab.
2. In the Property inspector (Window > Properties), select the state you want to see from the Preview States pop-up menu. For example, if you
want to see the widget in its valid state, select Valid.
Specify when validation occurs
You can set the point at which validation occurs—when the site visitor clicks outside the widget, as the visitor types, or when the visitor tries to
submit the form.
1. Select a Validation Password widget in the Document window by clicking its blue tab.
2. In the Property inspector (Window > Properties), select the option that indicates when you want validation to occur. You can select all of the
options or Submit only.
Blur Validates whenever the user clicks outside the password text field.
Change Validates as the user changes text inside the password text field.
Submit Validates when the user tries to submit the form. The submit option is selected by default, and cannot be deselected.
Set password strength
Password strength refers to the degree to which combinations of certain characters match the requirements for a password text field. For example,
if you’ve created a form in which users are selecting a password, you might want to force your users to include a certain number of uppercase
letters in the password, a certain number of special characters, and so on.
Note: By default, none of the available options are set for the Password widget.
1. Click the Validation Password widget’s blue tab to select it.
2. Set options in the Property inspector (Window > Properties) as desired. The numbers that you enter into the option fields are the numbers
required for the widget to validate. For example, if you enter 8 in the Minimum characters box, the widget will not validate unless the user
has entered at least eight characters in the password text field.
Minimum/Maximum characters Specifies the minimum and maximum number of characters required for the password to be valid.
Minimum/Maximum letters Specifies the minimum and maximum number of letters (a, b, c, and so on) required for the password to be valid.
Minimum/Maximum numbers Specifies the minimum and maximum number of numbers (1, 2, 3, and so on) required for the password to be
valid.
Minimum/Maximum uppercase Specifies the minimum and maximum number of uppercase letters (A, B, C, and so on) required for the password
to be valid.
Minimum/Maximum special characters Specifies the minimum and maximum number of special characters (!, @, #, and so on) required for the
password to be valid.
Leaving any of the above options blank causes the widget not to validate against that criterion. For example, if you leave the Minimum/Maximum
numbers option blank, the widget does not look for numbers in the password string.
Customize the Validation Password widget
Although the Property inspector enables you to make simple edits to a Validation Password widget, it does not support customized styling tasks.
You can alter the CSS for the Validation Password widget so that you can create a widget that is styled to your liking. For a more advanced list of
styling tasks, see
www.adobe.com/go/learn_dw_sprypassword_custom_en .
All CSS rules in the topics below refer to the default rules located in the SpryValidationPassword.css file. Dreamweaver saves the
SpryValidationPassword.css file in the SpryAssets folder of your site whenever you create a Spry Validation Password widget. Consulting this file is
helpful because it contains commented information about various styles that apply to the widget.
Although you can easily edit rules for the Validation Password widget directly in the accompanying CSS file, you can also use the CSS Styles
panel to edit the widget’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget,
especially if you use the panel’s Current mode.
Style a Validation Password widget (general instructions)
1. Open the SpryValidationPassword.css file.
2. 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.
3. 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.
305