Live Password Strength Meter

Help users create stronger passwords by providing instant feedback as they type. This example updates a strength bar, displays a readable strength label, and suggests improvements—all without waiting for the form to be submitted.

Markup

<form id="signupForm">
  <label for="passwordField">Password</label>

  <input
    type="password"
    id="passwordField"
    name="password"
    required
    minlength="8"
  />

  <div class="strength-bar">
    <div id="strengthFill"></div>
  </div>

  <p id="strengthLabel"></p>

  <ul id="strengthSuggestions"></ul>
</form>

---

JavaScript

import NFSFU234FormValidation from "@nfsfu234/form-validation";

const validator = new NFSFU234FormValidation(null);

const passwordField = document.getElementById("passwordField");
const fill = document.getElementById("strengthFill");
const label = document.getElementById("strengthLabel");
const suggestions = document.getElementById("strengthSuggestions");

passwordField.addEventListener("input", () => {
  const result = validator.passwordStrength(passwordField.value);

  fill.style.width = `${result.score}%`;

  label.textContent = result.label;

  suggestions.innerHTML = result.suggestions
    .map((tip) => `<li>${tip}</li>`)
    .join("");
});

Notice that the validator is created with null. This tells NFSFU234FormValidation not to attach itself to a form, making it perfect for standalone utilities like passwordStrength().

---

Example CSS

.strength-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

#strengthFill {
  height: 100%;
  width: 0%;
  transition: width 200ms ease;
}

Style the bar however you like. The library only provides the strength calculation—you control the appearance.

---

Notes

• passwordStrength() is completely synchronous and can safely run on every input event.
• The returned object includes:
  • score — a number from 0–100.
  • label — one of Very Weak, Weak, Fair, Good, or Strong.
  • suggestions — an array of recommendations to help users improve their password.
• No validation or network request is performed. This function only analyzes password strength.
• Using new NFSFU234FormValidation(null) is recommended here because no form validation or submission is needed.

---

Continue learning

• Password Utilities
• checkPassword()
• Initialization
• Usage
• Available Functions