In this tutorial I am going to share awesome jQuery Plugin – PassRequirements Which help your user to choose strong password and force user to fulfil certain password requirements. This jQuery plugin lists a set of requirements for an input field and crosses them out as the input matches each “requirement”. Good for password hints.also you can set usernames with special requirements,etc.
Creating Input field which meets certain requirements with hints popup
Libraries
The plugin dependent on jquery and bootstrap library so load dependent libraries first after that add passRequirements.js on page.
<!--CSS--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!--JS--> <script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="PassRequirements.js"></script>
HTML
Here i am going to create basic input field with default requirements.
<input id="pass">
JS
Very basic use of this plugin just call the function on page to use default requirements.
$(function() {
$('#pass').PassRequirements();
});
Here is the list of options you can pass in input field to set customize input requirements. Good for creating password hits and force user to choose strongest password.
$(function() {
$('#pass').PassRequirements({
rules: {
containSpecialChars: {
text: "Your input should contain at least minLength special character",
minLength: 1,
regex: new RegExp('([^!,%,&,@,#,$,^,*,?,_,~])', 'g')
},
containNumbers: {
text: "Your input should contain at least minLength numbers",
minLength: 2,
regex: new RegExp('[^0-9]', 'g')
}
},
popoverPlacement: 'top',
defaults: false,
trigger: 'click'
});
});
See live demos and download source code.
DEMO | DOWNLOAD
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.
