A repository of over 1000 quality jQuery plugins

jQuery Strength.js

Strength.js is a jQuery Inputs plugin.

Created by Aarondo

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

Not what you're looking for? Click here to view more Inputs jQuery plugins

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

VariableDefault ValueDescriptionValid Options
strengthClassstrengthThe CSS class that you want your input field to have
strengthMeterClassstrength_meterThe CSS class that you want your input field to have
strengthButtonClassbutton_strengthThe CSS class that you want the toggle button to have
strengthButtonTextShow PasswordThe text that you want to show for the toggle button
strengthButtonTextToggleHide PasswordThe toggled text that you want to show for the toggle button


  • Salma Nassri

    Where can I download the js files? Clicking the top right Download button does not seem to give me the correct files

  • Francesco Pepe

    Would you add bower.json?

  • Jason Gray

    It should be ‘weak’, not ‘week’. One is a measure of strength the other of time.

  • *parp*

    “Week” should be “Weak”. other than that this looks great

You might also like these other Inputs jQuery Plugins

  • easykeyjs

    A jQuery plugin that makes handling the keyboard really easy

  • jquery-flexdatalist

    Flexible input autocomplete/datalist plugin for jQuery

  • Multipicker

    Multipicker is jQuery plugin for selecting days, numbers or other elements, it supports multi selecting (like checkboxes) or single eleme...