Password Strength Indicator Using jQuery Plugin | jQuery.PasswordIndicator

JQuery-based minimum password strength indicator that calculates password strength based on certain criteria and displays password quality in a visual feedback tooltip with custom messages.

jquery password strength meter, password strength checker jquery, password strength verification with jquery, password strength checker jquery with progress bar

jQuery.PasswordIndicator is a simplified jQuery extension that depicts the strength of a password a user enters into a password entry field.

How to make use of it:

1. Import the stylesheet jquery.password-indicator.css and JavaScript jquery.password-indicator.js into the HTML web page.

<link rel="stylesheet" href="/path/to/jquery.password-indicator.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.password-indicator.js"></script>

2. Attach the Password Strength Indicator to a password input field you specify.

<input type="password" id="password" />
$(function() {

3. Override the default password strength algorithm:

  points: {
    forEachCharacter: 1,
    forEachSpace: 1,
    containsLowercaseLetter: 2,
    containsUppercaseLetter: 2,
    containsNumber: 4,
    containsSymbol: 5

4. Determine the password strength you contemplate secure.

  secureStrength: 30

5. Customize the suggestions messages & CSS classes:

  strengthClassNames: [{
    name: "very-weak",
    text: "Password strength : very weak"
  }, {
    name: "weak",
    text: "Password strength : weak"
  }, {
    name: "mediocre",
    text: "Password strength : mediocre"
  }, {
    name: "strong",
    text: "Password strength : strong"
  }, {
    name: "awesome",
    text: "Password strength : Awesome"

6. Customize the looks of the password strength indicator.


  // place the indicator in another element
  $indicator: undefined,

  // CSS class
  indicatorClassName: "password-strength-indicator",

  // CSS DISPLAY property
  indicatorDisplayType: "inline-block",

  // CSS properties
  cssProperties: {"float": "right", "font-size": "13px"},

Minimal Password Strength Indicator In jQuery, password indicator Plugin/Github, password strength checker javascript code, password progress bar javascript

See Demo And Download

Official Website(harypurnomo): Click Here

This superior jQuery/javascript plugin is developed by harypurnomo. For extra Advanced Usages, please go to the official website.

Related Posts


[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…


Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…


A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…


Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…