Password Strenth Checker Plugin For Bootstrap - Password Validator

Password Strenth Checker Plugin For Bootstrap - Password Validator

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.

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 (_,-,#,%,*,+)

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

  • Publication date: 06.07.2018
  • Source