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

  • Jesús Gerardo Mata Estrella

    Don’t work when there are 2 or more inputs password

  • Peter Klavins

    This is terrible. Password1 is considered strong with this.

    • Your Pal Nurav

      All it checks for is,
      1. a Upper-case Letter
      2. a number
      3. Length of password

      Doesn’t take into account any special characters… treats them as normal lower-case letter

  • What does it mean at the top of this article?
    https://ibb.co/5TJm34s

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...