Password Strength Validatior with jQuery - PassStrength

File Size: 11.3 KB
Views Total: 3514
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.