Password Strength Validatior with jQuery - PassStrength

PassStrength is a jQuery password strength validation plugin which features vast amount of settings to keep your passwords strong and a visual representation of password strength.

Features:

• Only allow the submit once the password is strong enough.
• A toggle button to reveal the password text.
• Disable copy / paste in your password field.
• A visual strength bar to indicator the password strength (TODO).
• Fully styleable via Bootstrap.

How to use it:

1. Include jQuery library and the jQuery PassStrength plugin in your Bootstrap project. Make sure you have Bootstrap framework installed.

<link rel="stylesheet" href="css/passStrength.css">
...
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/passStrength.js"></script>

2. Create a password field with a password reveal button in your form.

<div class="input-group">
  <span class="input-group-btn">
    <button id="togglePass" class="btn btn-default" type="button">Show</button>
  </span>
  <input type="password" class="form-control"/>
</div>
<button id="submitForm" type="submit" class="btn btn-default btn-default-custom">Submit</button>

3. Call the function on the password field to disable the submit button until your password is strong enough.

$('input[type="password"]').passStrength({
   button: '#submitForm',
   toggle: '#togglePass'
});

4. Default settings available.

$('input[type="password"]').passStrength({
submitButton: false,
toggleButton: false,
disable_copy: true,
strength: false,
strengthBar: false,
secondaryInput: false,
passwordMinLength: 8
});

Change log:

2015-06-23

• Added an animate function

2015-06-20

• Added Strength Meter

---

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