### Password Validation Widget

#### Description

The Spry Password Validation Widget is used to validate a password text field, verifying the strength of the password.

#### Required Files

> SpryValidationPassword.js

> SpryValidationPassword.css

#### Reference File

> SpryValidationPassword.html

#### Sample Files

> PasswordValidationSample.html

### Structure

The widget structure is as follows:

       <widget container>
          <input password>
          <message container(s)>
       </widget container>

The Password Validation Widget supports one password field per widget.

The markup used in this structure can be most any HTML, as long as it follows the rules for nesting.

Using the provided files, the default mark up is:

     <span id="sprypassword1">
    	<input type="password" name="password1" id="password1" />
     	<span class="passwordRequiredMsg">A value is required.</span>
    	<span class="passwordMinCharsMsg">The minimum number of characters not met.</span>
    	<span class="passwordMaxCharsMsg">The maximum number of characters exceeded.</span>
     	<span class="passwordInvalidStrengthMsg">The password strength condition not met.</span>
    	<span class="passwordCustomMsg">User defined condition not met.</span>
    </span>

The type and number of error messages will depend on the developer's needs.

### Constructor

Widget Constructors are small pieces of javascript that activate the markup into the working widget. These scripts must come AFTER the markup on the page, since the markup needs to exist before the constructor fires.

    <script type="text/javascript">
    <!--
    	var sprypassword1 = new Spry.Widget.ValidationPassword("sprypassword1");
    //-->
    </script>

#### Basic Constructor

A basic constructor specifies the name of the widget and identifies the ID of the main markup container. The name of the widget is used to identify the widget for functions and methods.

    <script type="text/javascript">
    	var widgetname = new Spry.Widget.ValidationPassword("id of widget container");
    </script>

#### Constructor Options

Constructor options allow users to specify certain attributes of the widget.

Constructor options follow the ID parameter, wrapped in curly braces {}. Options are name:value pairs, separated by a colon (:).

     <script type="text/javascript">
       var widgetname = new Spry.Widget.ValidationPassword("id of widget container",{option1:value, option2:value, option3:"value"});
     </script>

Option | Type | Default | Description
--- | --- | --- | ---
isRequired | Boolean | false | Determines if the field is required to have a value.
minChars | number/string | none | The minimum number of characters required for a valid password.
maxChars | number/string | none | The maximum allowable length of the password.
minAlphaChars | number/string | none | Minimum number of letters required for a password to be valid.
maxAlphaChars | number/string | none | Maximum number of letters required for a password to be valid.
minUpperAlphaChars | number/string | none | Minimum number of upper case letters required for a password to be valid.
maxUpperAlphaChars | number/string | none | Maximum number of upper case letters required for a password to be valid.
minSpecialChars | number/string | none | Minimum number of special characters required for a password to be valid.
maxSpecialChars | number/string | none | Maximum number of special characters required for a password to be valid.
minNumbers | number/string | none | Minimum number of numbers required for a password to be valid.
maxNumbers | number/string | none | Maximum number of numbers required for a password to be valid.
additionalError | string | none | The id of an element in the page where the classes that applies to the main container also are added.
focusClass | string | passwordFocusState | Custom CSS class to use for the focus state. Replaces the default .passwordFocusState class.
requiredClass | string | passwordRequiredState | Custom CSS class to use for the required state. Replaces the default .passwordRequiredState class.
invalidCharsMinClass | string | passwordMinCharsState | Custom CSS class to use for the invalidCharsMin state. Replaces the default .passwordMinCharsState class.
invalidCharsMaxClass | string | passwordMaxCharsState | Custom CSS class to use for the invalidCharsMax state. Replaces the default .passwordMaxCharsState class.
invalidStrengthClass | string | passwordInvalidStrengthState | Custom CSS class to use for the InvalidStrengthState state. Replaces the default .passwordInvalidStrengthState class.
validClass | string | passwordValidState | Custom CSS class to use for the valid state. Replaces the default .passwordValidState class.
validateOn | string | onSubmit | Determines what event will cause the field to be validated. It always checks onSubmit. Other values are 'blur' and 'change'.

     <script type="text/javascript">
          var PasswordWidgetObject  = new Spry.Widget.ValidationPassword("PasswordWidget", {maxChars:8, validateOn:["blur", "change"], focusClass:"myfocus"});
     </script>

Recall that javascript is case sensitive.

## Password Validation Widget Methods

### reset

Reset the widget to its original state.

#### Format

widgetName.reset();

#### Example

     <a href="#" onclick="PasswordWidgetObject.reset(); return false;">Reset Password</a>

### validate

Validates the current state of the widget.

#### Format

widgetName.validate();

#### Example

    <a href="#" onclick="PasswordWidgetObject.validate(); return false;">Validate Password</a>

Copyright © 2007. Adobe Systems Incorporated.
All rights reserved.