Strength.js

The ultimate jQuery password input plugin. Featuring secure strength indicator and hide/show password

Documentation

Strength.js provides a toggle feature for password input fields that allows the user to view or asterisk the password. It also features a strength indicator to show how secure a users password is.

The password secuirty indicator is marked on 4 scores. These are

• Password must contain 8 characters or more
• Password must contain 1 lowercase letter
• Password must contain 1 uppercase letter
• Password must contain 1 number

..:: Getting Started

Include the relevant files

Firstly include jQuery and the strength.css and strength.js files. Place these before </head> section

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="strength.js"></script>
<script type="text/javascript" src="js.js"></script>

Create a password input field

You must give your password input a unique ID.

<input id="myPassword" type="password" name="" value="">

Initiate the plugin

Once you have created your password input field you will need to initiate the plugin.

At its most basic level you can initiate the plugin like:

$(document).ready(function ($) {

    $("#myPassword").strength();

});

If you want to initiate the plugin with options then you can do so like:

$('#myPassword').strength({
        strengthClass: 'strength',
        strengthMeterClass: 'strength_meter',
        strengthButtonClass: 'button_strength',
        strengthButtonText: 'Show password',
        strengthButtonTextToggle: 'Hide Password'
    });     

..:: Options