Password Strenth Checker Plugin For Bootstrap - Password Validator

Password Strenth Checker Plugin For Bootstrap - Password Validator
File Size: 604 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A user-friendly password strength validator for password fields that shows an interactive feedback to indicate whether or not the password meets the requirements.

The plugin uses Bootstrap's (Bootstrap 4) Popover and Progressbar components for the instant password feedback while typing.

How to use it:

1. Load the needed jQuery JavaScript library and Bootstrap 4 framework in the html page.

<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" 
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
      integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
      crossorigin="anonymous">

<!-- Bootstrap JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" 
        integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" 
        crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" 
        integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" 
        crossorigin="anonymous">
</script>

2. Insert the JavaScript file PasswordValidator.js after jQuery.

<script src="PasswordValidator.js"></script>

3. That's it. The plugin loops through all forms on the page and adds popover to all password fields with the class validate.

4. The default password requirement.

  • Between 10-12 Characters
  • An upper Case Letter
  • A Number
  • At Least 1 of the Following (_,-,#,%,*,+)

Changelog:

2018-09-09

  • v2

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