Slim Password Strength Meter for jQuery & Vanilla JS - Passcore

Passcore is a password strength meter for jQuery and Vanilla JavaScript that evaluates passwords as they are typed.

It attaches a strength bar and feedback messages to an existing password field, with a shared scoring engine for both implementations.

Features:

• Live strength percentages and five nonempty strength levels.
• Checks for common passwords, personal details, and repeated or predictable patterns.
• Configurable password length and character requirements.
• Accessible meter values and screen-reader feedback.
• Custom messages, translations, and strength thresholds.
• CSS custom properties for the progress bar and strength colors.
• jQuery plugin, Vanilla JavaScript function, and HTML custom element.
• Events and callbacks for changes to scores and feedback messages.

Installation:

Install the jQuery package for an existing jQuery form, or the Vanilla JavaScript package for a dependency-free browser integration. Both packages use the @passcore/core scoring engine.

# jQuery 3 or 4
npm install @passcore/jquery jquery

# Vanilla JavaScript
npm install @passcore/vanilla

# Headless scoring only
npm install @passcore/core

How to Use Passcore with jQuery:

Basic Browser Setup

The standalone jQuery build includes the core evaluator. Load its stylesheet, jQuery, and the Passcore plugin in the document. Wrap the input in a div for the default closestSelector setting.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@passcore/jquery@1/dist/styles.css">

<div class="form-group">
  <label for="username">Username</label>
  <input type="text" id="username" autocomplete="username">
  <label for="password">New password</label>
  <input type="password" id="password" autocomplete="new-password">
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@passcore/jquery@1/dist/password.min.js"></script>
<script>
  jQuery(function ($) {
    $('#password').password({
      userInputs: ['#username'],
      showPercent: true,
      animate: false,
      rules: { minLength: 10 }
    });
  });
</script>

ES Module Setup

Use the HTML fields from the browser example above. The package registers $.fn.password on the imported jQuery instance.

import $ from 'jquery';
import '@passcore/jquery';
import '@passcore/jquery/styles.css';

$(function () {
  $('#password').password({
    userInputs: ['#username'],
    rules: { minLength: 10, numbers: 1 }
  });
});

Register the Plugin on Another jQuery Instance

When a page uses a different jQuery instance from the imported module, register the plugin on that instance explicitly.

import { install } from '@passcore/jquery';

install(window.jQuery);
window.jQuery('#password').password();

React to Password Scores in jQuery

The password.score event receives (event, percent, result) on updates. The result.valid flag reports whether all enabled password rules pass.

<div class="form-group">
  <label for="registration-password">New password</label>
  <input type="password" id="registration-password" autocomplete="new-password">
</div>
<button type="button" id="next-button" disabled>Continue</button>

$('#registration-password')
  .on('password.score', function (event, percent, result) {
    $('#next-button').prop('disabled', !result.valid);
  })
  .on('password.text', function (event, text, result) {
    console.log(text, result.level);
  })
  .password({
    animate: false,
    rules: { minLength: 10, numbers: 1 }
  });

How to Use Passcore with Vanilla JavaScript:

Basic Browser Setup

The standalone Vanilla JavaScript build exposes passcore.createPasswordMeter() and does not require jQuery. It inserts the meter immediately after the input unless you set a custom container.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@passcore/vanilla@1/dist/styles.css">

<label for="plain-username">Username</label>
<input type="text" id="plain-username" autocomplete="username">
<label for="plain-password">New password</label>
<input type="password" id="plain-password" autocomplete="new-password">

<script src="https://cdn.jsdelivr.net/npm/@passcore/vanilla@1/dist/passcore.min.js"></script>
<script>
  const meter = passcore.createPasswordMeter('#plain-password', {
    userInputs: ['#plain-username'],
    showPercent: true,
    rules: { minLength: 10 }
  });
</script>

ES Module Setup

For a bundler-based project, use the plain-password and plain-username fields from the HTML example above.

import { createPasswordMeter } from '@passcore/vanilla';
import '@passcore/vanilla/styles.css';

const meter = createPasswordMeter('#plain-password', {
  userInputs: ['#plain-username'],
  hideUntilFocus: true,
  rules: { minLength: 10, numbers: 1 }
});

HTML Custom Element

The <passcore-meter> custom element displays its meter at the element's location. Its required for attribute matches the password input's ID.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@passcore/vanilla@1/dist/styles.css">

<label for="element-password">New password</label>
<input type="password" id="element-password" autocomplete="new-password">
<passcore-meter for="element-password" min-length="10" show-percent></passcore-meter>

<script src="https://cdn.jsdelivr.net/npm/@passcore/vanilla@1/dist/passcore-element.min.js"></script>

Configuration Options:

Shared Meter and Scoring Options

Both DOM integrations accept these options. The rules and levels objects merge with their defaults.

Option	Default and Behavior
userInputs	[]. Form values that the password must not contain. Selectors are evaluated against all matching elements; DOM elements and functions are accepted. The jQuery adapter also accepts jQuery objects.
showPercent	false. Display the numeric percentage.
showText	true. Display feedback beside the meter.
label	'Password strength'. Accessible meter label, read at creation.
translations	{}. Override translated strings in i18next JSON format.
locale	'en'. Locale for plural forms.
translate	undefined. Custom (key, params) => string translation function.
targetBits	100. Estimated bits corresponding to 100%.
estimator	undefined. Custom (password, userInputs) => bits estimator.
commonPasswords	undefined in DOM adapters. Supply a replacement common-password collection.
rules	Rule object. Defaults and rule names appear below.
levels	Strength threshold object. Defaults appear below.

jQuery Options

Option	Default and Behavior
animate	true. Hide the bar until focus and animate it on focus or blur.
animateSpeed	'fast'. jQuery animation speed.
closestSelector	'div'. Ancestor container that receives the meter.

Vanilla JavaScript Options

Option	Default and Behavior
container	undefined. Append to an element or selector. By default, insert immediately after the input.
hideUntilFocus	false. Show the meter on focus; hide it on blur when the field is empty.
listen	true. Listen to input, focus, and blur. Set to false and call refresh() manually.

Password Rules

Rule	Default and Behavior
minLength	8. Minimum password length; 0 disables the rule.
maxLength	0. Maximum length; disabled by default.
lowercase	0. Minimum lowercase character count.
uppercase	0. Minimum uppercase character count.
numbers	0. Minimum numeric character count.
symbols	0. Minimum ASCII symbol or space character count.
notUserInputs	true. Reject passwords containing values passed through userInputs.
notCommon	true. Reject common passwords and simple numeric or symbolic variations.

Strength Levels

Each level begins at its percentage threshold. The empty level applies to an empty password.

Level	Default Minimum
very-weak	0
weak	20
fair	40
good	60
strong	80

For example, the jQuery plugin accepts a partial rules object and a custom strength threshold:

$('#password').password({
  rules: { minLength: 12, numbers: 1, symbols: 1 },
  levels: { strong: 90 },
  animate: false
});

API Methods and Commands:

jQuery Plugin Commands

Calling .password(options) again replaces the existing meter. All three commands return the selected jQuery collection; refresh and destroy do nothing for an uninitialized field.

Command	Action
.password(options)	Create or replace a meter for each selected input.
.password('refresh')	Reevaluate the password and update the feedback.
.password('destroy')	Remove meter markup, listeners, and associated accessibility attributes.

Vanilla JavaScript Instance

createPasswordMeter(input, options) returns a meter instance.

Member	Behavior
meter.result	Last evaluation result.
meter.refresh()	Reevaluate and render the meter; returns the result.
meter.focus()	Apply the meter's focus behavior.
meter.blur()	Apply the meter's blur behavior.
meter.destroy()	Remove markup and listeners; restore aria-describedby.

Custom Element Attributes

Attribute	Behavior
for	Required ID of the password input.
min-length	rules.minLength.
max-length	rules.maxLength.
target-bits	targetBits.
show-percent	Display the percentage.
hide-text	Hide the feedback message.
hide-until-focus	Hide the meter until input focus.
locale	Pluralization locale.
label	Accessible meter label.
user-inputs	One CSS selector list, for example #username, #email.

Configure other options through the custom element's options property. Property values override attributes.

document.querySelector('passcore-meter').options = {
  rules: { numbers: 1 },
  translations: { empty: 'Enter a password' }
};

Events and Callbacks:

jQuery Events

Event	Arguments and Behavior
password.score	(event, percent, result). Fires on each input update and refresh, including when the evaluated result does not change.
password.text	(event, text, result). Fires when the message key or parameters change.

Vanilla JavaScript Callbacks

These callback options run after creation, not during the initial render.

Callback	When It Runs
onScore(percent, result)	undefined by default. Runs when the evaluated result changes.
onText(text, result)	undefined by default. Runs when the message key or parameters change, even when showText is false.

Vanilla JavaScript DOM Events

Both events bubble from the password input. Their detail objects contain the full evaluation result.

Event	Detail
passcore:score	{ percent, result }. Fires when the result changes.
passcore:text	{ text, result }. Fires when the message changes.

const input = document.querySelector('#plain-password');

input.addEventListener('passcore:score', function (event) {
  console.log(event.detail.percent, event.detail.result.valid);
});

input.addEventListener('passcore:text', function (event) {
  console.log(event.detail.text);
});

Use the Core Password Evaluator:

@passcore/core calculates password strength and checks rules independently of DOM access or HTML rendering. It can run in browser code or server-side JavaScript.

import { createMeter } from '@passcore/core';

const checker = createMeter({
  rules: { minLength: 10, numbers: 1 }
});

const result = checker.evaluate(
  'correct horse battery staple 2',
  ['johndoe', '[email protected]']
);

console.log(result.percent, result.level, result.valid);

Core API

API	Behavior
createMeter(options)	Resolve the options once and return an evaluator for repeated use.
meter.evaluate(password, userInputs)	Return a new evaluation result; userInputs contains literal values, not selectors.
meter.options	Frozen resolved configuration.
evaluate(password, options)	Perform a single evaluation. Pass userInputs inside options.
createTranslator(translations, locale)	Create a translator from an object or an ordered array of translation layers.
translationParams(message)	Prepare translation parameters, including pluralization count.
defaultOptions	Frozen default core options.
commonPasswords	Bundled common-password collection; it can be extended in a custom configuration.

Evaluation Result

Field	Meaning
bits	Estimated password strength.
percent	Integer from 0 to 100, relative to targetBits.
level	empty, very-weak, weak, fair, good, or strong.
valid	true when all enabled password rules pass.
rules	Array of { id, passed, params } entries for enabled rules.
message	{ key, params } describing the first failing rule or the strength level.

Customize Messages and Styling:

Custom Feedback Messages

Messages use i18next-style JSON keys and {{count}} placeholders. English, Spanish, and Catalan translations are available. For the jQuery plugin:

$('#password').password({
  translations: {
    empty: 'Enter a password',
    rule: {
      minLength_one: 'Enter at least {{count}} character',
      minLength_other: 'Enter at least {{count}} characters'
    }
  },
  rules: { minLength: 10 }
});

CSS Custom Properties

The stylesheet accepts these public color and sizing properties. These values are examples for custom themes.

Property	Example Value
--pass-height	6px
--pass-track	#eee
--pass-color-very-weak	#b91c1c
--pass-color-weak	#c2410c
--pass-color-fair	#a16207
--pass-color-good	#4d7c0f
--pass-color-strong	#15803d

Rendered Markup and CSS Classes

The meter uses role="meter" and ARIA values from 0 to 100. Its feedback text has aria-live="polite", and the password input's aria-describedby points to that text. The default stylesheet also handles forced-colors mode.

Class	Purpose
pass-wrapper	Outer meter wrapper.
pass-meter	ARIA meter track.
pass-bar	Strength bar element.
pass-percent	Visible numeric percentage.
pass-text	Feedback message and live region.
pass-level-*	Wrapper class for the strength level, for example pass-level-weak.
pass-invalid	Wrapper class when an enabled rule fails.
pass-hidden	Hidden wrapper state for Vanilla JavaScript's hideUntilFocus.
pass-strength-visible	Class on the meter's containing element while it is shown.

Migrating from the Original jQuery Plugin:

The password-strength-meter 2.x plugin uses different option names and scoring behavior. Its 3.x npm compatibility release retains the old API. The replacement jQuery package is @passcore/jquery.

Old Option	Passcore 1.x Replacement
enterPass	translations.empty
shortPass	translations.rule.minLength_one / minLength_other
containsField	translations.rule.notUserInputs
steps	levels for thresholds; translations.level for messages
minimumLength	rules.minLength; the default changed from 4 to 8
field	userInputs: ['#username']
fieldPartialMatch	Removed; user input text is matched anywhere in the password.
useColorBarImage, customColorBarRGB	Removed; style the meter with CSS custom properties.
messages (older releases)	translations or translate

Alternatives and Related Resources:

• 10 Best Password Strength Checkers In JavaScript (2026 Update)
• Check The Strength Of A Password - password-strength.js
• jQuery Plugin For Password Strength Checker and Indicator - Password-Strength
• Vanilla JS Password Strength Checker for Better Form Security

Changelog:

2026-10-09

• The plugin is rewritten and renamed to passcore

---

This awesome jQuery plugin is developed by elboletaire. For more Advanced Usages, please check the demo page or visit the official website.