Skip to content
The ultimate jQuery password input plugin. Featuring secure strength indicator and hide/show password
Branch: master
Clone or download
Latest commit bfd0917 Dec 22, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
.gitattributes
.gitignore
README.md

README.md

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

						</tbody>
					</table>
Variable Default Value Description Valid Options
strengthClass strength The CSS class that you want your input field to have
strengthMeterClass strength_meter The CSS class that you want your input field to have
strengthButtonClass button_strength The CSS class that you want the toggle button to have
strengthButtonText Show Password The text that you want to show for the toggle button
strengthButtonTextToggle Hide Password The toggled text that you want to show for the toggle button
You can’t perform that action at this time.