Hit enter after type your search item

jQuery password strength indicator: 3 demos with Bootstrap

The password strength indicator plug-in

In your websites, you may have secured forms for creating user accounts that ask certain information including creating a password. In order to implement strong password, it’s a good practice to guide a user during the account creation process that how strong their password is?

The bigger email websites like Gmail, Yahoo etc has implemented this feature where a user is notified how strong their password. In you need this feature in your website, this guide helps you building that by using a jQuery-based plug-in.

As you enter the password in the text field, it will indicate the strength and also guides how it can be stronger. See the following demos where I used Bootstrap framework for creating a form. In the Bootstrap form, I created a password field. Try entering different characters including numbers and special symbols and see how it displays the bar. You may also see the setting up guide for this jQuery based password strength plug-in.

A demo of using password strength with Bootstrap form

The form is built by using Bootstrap 3 framework. It contains a few other fields like Name, email etc. apart from the password field, just to show the demo in the “complete” form. Leave the other fields and just enter in the password textbox and see how it displays the indication of password strength:

jQuery password strength

See online demo and code

For setting up this plug-in, simply include the jQuery file along with plug-in’s JS file above the </body> tag.

<script src=”http://code.jquery.com/jquery-1.12.4.min.js”></script>

<script src=”js/jquery.passwordstrength/jquery.passwordstrength.js”></script>

As I used Bootstrap framework for the demo, I included the Bootstrap JS and CSS files as well.

The ID of the password field is used for calling the method of password strength plug-in. This is how it is used in the demo:


 

That is, you need to call the passwordStrength() method with the id or class name of the password field where you want to indicate the password strength.

The markup of example:


 

A demo of using without Bootstrap in raw password field

Just to show you, the jQuery password strength plug-in can be used in any form other than Bootstrap, I created a form with just a password field without any CSS. So, its look is basic with a submit button. Have a look by entering a few characters in the password field:

jQuery password strength raw

See online demo and code

The code for above example:


 

You can see, the strength bar is not appearing as in above example, however, the instructions can be seen.

A Bootstrap form demo with icons and very strong password

Just like the first example, I used Bootstrap classes for creating form fields with icons at the right side of each field. The green bar below the password field indicates “Very Strong” password status (as shown in the figure below).

Bootstrap password strengt

See online demo and code

See the complete code in the demo page.

Changing the information displayed to the users

If you intend to change some information that is displayed as password strength is shown while using this plug-in, you may do this by changing the plug-in’s JS file.

This div height required for enabling the sticky sidebar