Demo: http://jsfiddle.net/tijsvanerp/L8bg35wa/1/
A jQuery to plugin to validate if a password meets certain requirements. Some organisations still use password policies that are based on the usage of certain characters in passwords instead of requiring a certain complexity. This plugin checks for the usage of those characters.
Installation with bower:
$ bower install jquery-password-requirement-checker
Installation with NPM:
$ npm i jquery-password-requirement-checker
Please include 'base-styling.css' (See dist/css/base-styling.css) inside the head-tags of the HTML to add the necessary display classes (and icons) to the elements. We've included a SASS-file/Grunt setup if more styling customization is needed.
<form>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="">
</div>
<div class="password-req-checker">
<h4>Password must meet the following requirements:</h4>
<ul>
<li class="invalid lowercase">At least <strong><span class="amount">1</span> lower case character(s)</strong></li>
<li class="invalid uppercase">At least <strong><span class="amount">1</span> upper case character(s)</strong></li>
<li class="invalid numbers">At least <strong><span class="amount">1</span> number(s)</strong></li>
<li class="invalid specialchars">At least <strong><span class="amount">1</span> special character(s)</strong></li>
<li class="invalid length">At least <strong><span class="amount">8</span> total characters</strong></li>
</ul>
</div>
</form>
<script src="dist/js/jquery.password-requirements-checker.min.js"></script><script>
$(document).ready(function() {
$("#password").passwordRequirements();
});
</script>All settings within the plugin can be set as an option:
<script>
$(document).ready(function() {
$("#password").passwordRequirements({
minLength: 12,
minAmounts: {
specialChars: 3
}
});
});
</script>