jQuery Password Validation while Typing

Category: Text & Input | July 4, 2020
jQuery Password Validation while Typing
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">
</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.

OptionDefaultTypeDescription
numCharacters8NumberIt defines the minimum password length.

Example:

$(".pr-password").passwordRequirements({
	numCharacters : 8,
});
useLowercasetrueBooleanEnable/disable lowercase validation rule.

Example:

$(".pr-password").passwordRequirements({
	useLowercase : true,
});
useUppercasetrueBooleanSimilarly, this option enables/disable uppercase validation rule.

Example:

$(".pr-password").passwordRequirements({
	useUppercase : true,
});
useNumberstrurBooleanDecide whether to use numbers in a password or not.

Example:

$(".pr-password").passwordRequirements({
	useNumbers : trur,
});
useSpecialtrueBooleanLikewise, turns on/off special characters validate rule in a password.

Example:

$(".pr-password").passwordRequirements({
	useSpecial : true,
});
infoMessage“”StringAny 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.

Example:

$(".pr-password").passwordRequirements({
	infoMessage : "",
});
style“light”StringIt defines the style/theme for a password strength tooltip. Therefore, the possible options are “light” and “dark”.

Example:

$(".pr-password").passwordRequirements({
	style : "light",
});
fadeTime300NumberFade in / fade out duration in milliseconds.

Example:

$(".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.

You May Also Like

Leave a Comment

twenty − six =

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