jQuery Password Validation while Typing

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">
</form>

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 (){
   $(".pr-password").passwordRequirements();
});

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.

$(".pr-password").passwordRequirements({
	numCharacters : 8,
});

$(".pr-password").passwordRequirements({
	useLowercase : true,
});

$(".pr-password").passwordRequirements({
	useUppercase : true,
});

$(".pr-password").passwordRequirements({
	useNumbers : trur,
});

$(".pr-password").passwordRequirements({
	useSpecial : true,
});

$(".pr-password").passwordRequirements({
	infoMessage : "",
});

$(".pr-password").passwordRequirements({
	style : "light",
});

$(".pr-password").passwordRequirements({
	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.