Fork me on GitHub

Example: Basic password field creation

How to create a password field.

Basic PasswordField creation

Use the following code to create a basic inputEx PasswordField.

Password and confirmation

The confirm option makes sure there is no typo in new passwords. Use it in combination with an id set on the password field to compare with.

Password length

Set the minimum password length using the minLength option :

Password strength indicator

A widget indicating the strength of the password (useful for password creation) :

Caps Lock Warning

Display a warning if the caps lock key is on

HTML

<div id="field-container"></div>

JavaScript

Implementation

YUI().use('inputex-password','inputex-group', function(Y) {

    // Example 1
    new Y.inputEx.PasswordField({parentEl: 'container1', showMsg: true});
    
    
    // Example 2
    // Using the json instanciation method :
    Y.inputEx({
        type: 'group',
        fields: [
            {type: 'password', label: 'New password', showMsg: true, required: true, id: 'firstPassword' },
            {type: 'password', label: 'Confirmation', showMsg: true, required: true, confirm: 'firstPassword' }
        ],
        parentEl: 'container2'
    });
    
    
    // Example 3
    new Y.inputEx.PasswordField({parentEl: 'container3', showMsg: true, minLength: 10});
    
    
    // Example 4
    new Y.inputEx.PasswordField({parentEl: 'container4', showMsg: true, strengthIndicator: true});
    
    
    // Example 5
    new Y.inputEx.PasswordField({parentEl: 'container5', showMsg: true, capsLockWarning: true });
    
});