jQuery Password Validation while Typing

Category: Text & Input | July 4, 2020
Author: Alvaro Montero
Official Page: Go to Website
Last Update: July 4, 2020
License: MIT

Yet another password validation plugin for jQuery to validate the password while typing. This plugin renders a password strength meter popup/tooltip along with a password field that shows password complexity with checklist style. The main purpose of this plugin is to validate the password with minimum password length, special characters, numbers, use of the capital letter, and lowercase letters.

The plugin “Password Requirments”, allows you to control each validation rules through its configuration options. So, you can easily enable/disable each validation rule using a boolean value for the required type of a password without going into hassle. Similarly, you can set the custom fade-in duration for password strength popup.

Additionally, the plugin comes with two built-in themes (light and dark) to customize the looking of password validation popup. Likewise, you can also place a custom info message inside the popup through its configuration option.

Basically, you can validate all most all types of password strength rules with the help of this lightweight plugin. So, before integrated with this plugin check out the demo page to see it in action.

How to Implement Password Validation while Typing Plugin

In order to validate your password while typing, you need to getting started with the “Password Requirments” jQuery plugin. After downloading this project, load the Bootstrap CSS (optional) and "jquery.passwordRequirements.css"CSS file inside the head tag of your HTML page.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/minty/bootstrap.min.css">
<!-- Password Requirements CSS -->
<link rel="stylesheet" href="css/jquery.passwordRequirements.css" />

After that, create an HTML form element, define a class name "pr-password" for your password input field. If you are using Bootstrap, also add a "form-control" class in it.

<form class="demo-form" action="#">
   <label for="user">Username:</label>
   <input type="text" class="form-control">
   <label for="password">Enter Password:</label>
   <input type="password" class="pr-password form-control">

After creating the HTML structure, include the jQuery JavaScript library by adding the following CDN link just before the closing of the body tag. Likewise, add the "jquery.passwordRequirements.min.js" file (from the downloaded directory) just after the jQuery script.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- Password Requirements JS --> 
<script src="js/jquery.passwordRequirements.min.js"></script>

Finally, initialize the plugin in the jQuery document ready function to activate the password validation feature while typing.

$(document).ready(function (){

Advanced Configuration Options

If you want to customize the plugin working, use its configuration options to get the desired results. So, the following are available configuration options (with their default values) for the passwordRequirements plugin.

Option Default Type Description
numCharacters 8 Number It defines the minimum password length.


	numCharacters : 8,
useLowercase true Boolean Enable/disable lowercase validation rule.


	useLowercase : true,
useUppercase true Boolean Similarly, this option enables/disable uppercase validation rule.


	useUppercase : true,
useNumbers trur Boolean Decide whether to use numbers in a password or not.


	useNumbers : trur,
useSpecial true Boolean Likewise, turns on/off special characters validate rule in a password.


	useSpecial : true,
infoMessage “” String Any extra informative message in the password validation popup/tooltip. By default, its blank string. However, you can pass any string value to display the info message.


	infoMessage : "",
style “light” String It defines the style/theme for a password strength tooltip. Therefore, the possible options are “light” and “dark”.


	style : "light",
fadeTime 300 Number Fade in / fade out duration in milliseconds.


	fadeTime : 300,

That’s all! We hope you like this jQuery plugin to validate your passwords. If you have any issues or questions about this validation plugin, let us know by comment below.

You Might Be Interested In:

3 thoughts on “jQuery Password Validation while Typing”

    • Hi Muzam!
      You can add the “disabled” attribute in input type submit and remove this attribute after validating the password.

      <input id="submit" type="submit" value="Submit" disabled>

      Then you can remove this attribute in jQuery like below:

      <input type="submit" value="Submit" disabled>

      Use the above statement along with the if condition when the user entered the correct password.


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.