README

jQuery plugin for password validation with Bootstrap UI (strength bar, requirements list, show/hide button, repeat check).

Features

Validates password rules live while typing
Displays visual strength/progress via progress bar
Optional repeat-password comparison
Optional submit button enable/disable
Autofill reduction for password fields (autocomplete="new-password" plus password manager hints)

Requirements

jQuery
Bootstrap (including Collapse + styles)
Optional: Bootstrap Icons

Installation

Include the project file:

<script src="dist/bsPassword.js"></script>

Usage

<div class="mb-3">
  <label for="password">Password</label>
  <input id="password" type="password" class="form-control">
</div>

<div class="mb-3">
  <label for="passwordRepeat">Repeat password</label>
  <input id="passwordRepeat" type="password" class="form-control">
</div>

<button id="registerBtn" class="btn btn-primary" type="submit">Register</button>

<script>
  $('#password').bsPassword({
    activationButton: '#registerBtn',
    passwordRepeat: '#passwordRepeat'
  });
</script>

Options

$('#password').bsPassword({
  disableAutofill: true,
  activationButton: null,
  passwordRepeat: null,
  conditions: {
    minLength: 10,
    minLengthTitle: 'Password must be at least %value% characters long',
    minLowercase: 1,
    minLowercaseTitle: 'At least %value% lowercase letters',
    minUppercase: 1,
    minUppercaseTitle: 'At least %value% uppercase letters',
    minNumbers: 1,
    minNumbersTitle: 'At least %value% numbers',
    minSpecialChars: 1,
    specialChars: '\\$@#&!()=\\-.%',
    minSpecialCharsTitle: 'At least %value% special characters ($@#&!()=-.%)'
  },
  classes: {
    toggleButton: 'btn btn-outline-secondary rounded-end'
  },
  icons: {
    show: 'bi bi-eye',
    hide: 'bi bi-eye-slash',
    success: 'bi bi-check-lg text-success me-1',
    error: 'bi bi-x-lg text-danger me-1'
  }
});

When both activationButton and passwordRepeat are set, the activation button is enabled only if:

password rules are valid
repeat password is non-empty and matches

Autofill Note

Browsers may still enforce autofill depending on user settings. The plugin applies best-practice attributes (new-password, data-lpignore, data-1p-ignore, etc.) to reduce autofill behavior across common browsers and password managers as much as possible.

Translations

English is built in as the default translation.
If window.bsPasswordTranslations is defined before plugin initialization, its values override the default text keys.

<script src="dist/locale/de-DE.js"></script>
<script src="dist/bsPassword.js"></script>

Available locale files in dist/locale:

de-DE.js
en-GB.js
es-ES.js
fr-FR.js
it-IT.js
nl-NL.js
pt-PT.js

webcito / bs-password

Maintainers

Package info

Statistics

Security