How we can create a password validation program using JavaScript or any JS library? Solution: See this jQuery Password Strength Checker With Bootstrap, Password Validation Program.
Previously I have shared an email validation program using JavaScript, but this program is for validating password. Basically, the password validation program uses almost top websites for telling to users for choosing a strong password. If we put a weak and predictable password then anyone can guess and also have a chance of hacking.
Today you will learn to create a Password Validation program using JavaScript. Basically, there are two password input fields one for password and other for retyping the password. Middle of these two fields there is some validations. When you will choose a password according to these conditions then these conditions will be checked with a tick mark.
So, Today I am sharing jQuery Password Strength Checker With Bootstrap Layout. For creating this program I have used bootstrap for an attractive and responsive layout with less work. And for the strength checker function, I have used jQuery which is a JavaScript library. If we use pure JavaScript then code will difficult to understand and more lines.
If you are thinking now how this password checker actually is, then see the preview given below.
Preview Of Password Validation Program
See this video preview to getting an idea of how this password checker program lools like.
Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- JavaScript Loan Calculator
- Credit Card Details Form
- jQuery Floating Label Animation
- Popup Subscription Form
jQuery Password Strength Checker Source Code
Before sharing source code, let’s talk about it. First I have created a main div inside that, I have placed two password input fields and a list. I have created form-group (info) for managing all the elements and put many class names which are powered by bootstrap. And I have used two icons for checking validation, which icons are placed using font-awesome.
Now using CSS I have done little works like icon color, background color, etc. All the design and placement completely based on Bootstrap grids. In the HTML file, I have linked all the external files like Bootstrap, jQuery, Font-Awesome, etc. There is a cross icon and a tick icon, when validation is done then the cross icon becomes a tick icon.
jQuery handling the main feature of the program. JS checking the conditions using if-else statement and used password.match() command. According to action jQuery changing the CSS values and icon dynamically. Left all other things you will understand after getting the codes, I can’t explain all in writing but I have left comments in JS code.
For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Password Strength Checker | Webdevtrick.com</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,400'> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3"> <form class="form-horizontal mar-top-bot-50" id="validateForm" action="#"> <h1>Check Password</h1> <fieldset> <!-- Password input--> <div class="form-group"> <label class="col-md-12 control-label" for="passwordinput">Password <span id="popover-password-top" class="hide pull-right block-help"><i class="fa fa-info-circle text-danger" aria-hidden="true"></i> Enter a strong password</span></label> <div class="col-md-12"> <input id="password" name="password" type="password" placeholder="" class="form-control input-md" data-placement="bottom" data-toggle="popover" data-container="body" type="button" data-html="true"> <div id="popover-password"> <p>Password Strength: <span id="result"> </span></p> <div class="progress"> <div id="password-strength" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:0%"> </div> </div> <ul class="list-unstyled"> <li class=""><span class="low-upper-case"><i class="fa fa-times" aria-hidden="true"></i></span> 1 lowercase & 1 uppercase</li> <li class=""><span class="one-number"><i class="fa fa-times" aria-hidden="true"></i></span> 1 number (0-9)</li> <li class=""><span class="one-special-char"><i class="fa fa-times" aria-hidden="true"></i></span> 1 Special Character (!@#$%^&*).</li> <li class=""><span class="eight-character"><i class="fa fa-times" aria-hidden="true"></i></span> Atleast 8 Character</li> </ul> </div> </div> </div> <!-- Repeat Password --> <div class="form-group"> <label class="col-md-12 control-label" for="passwordinput">Password Confirmation <span id="popover-cpassword" class="hide pull-right block-help"><i class="fa fa-info-circle text-danger" aria-hidden="true"></i> Password don't match</span></label> <div class="col-md-12"> <input id="confirm-password" name="confirm-password" type="password" placeholder="" class="form-control input-md"> </div> </div> </fieldset> </form> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'> </script><script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body { font-family: 'Lato', sans-serif; background: #eeeeee; } .form-horizontal { background: white; } .container { margin-top: 10%; } .progress { height: 5px; } .control-label { text-align: left !important; padding-bottom: 7px; } .form-horizontal { padding: 25px 20px; border: 2px solid #e8eaed; border-radius: 5px; } .fa-times { color: red; } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
// Code By Webdevtrick ( https://webdevtrick.com ) $(document).ready(function() { $('#password').keyup(function() { var password = $('#password').val(); if (checkStrength(password) == false) { $('#sign-up').attr('disabled', true); } }); $('#confirm-password').blur(function() { if ($('#password').val() !== $('#confirm-password').val()) { $('#popover-cpassword').removeClass('hide'); $('#sign-up').attr('disabled', true); } else { $('#popover-cpassword').addClass('hide'); } }); function checkStrength(password) { var strength = 0; //If password contains both lower and uppercase characters, increase strength value. if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) { strength += 1; $('.low-upper-case').addClass('text-success'); $('.low-upper-case i').removeClass('fa-times').addClass('fa-check'); $('#popover-password-top').addClass('hide'); } else { $('.low-upper-case').removeClass('text-success'); $('.low-upper-case i').addClass('fa-times').removeClass('fa-check'); $('#popover-password-top').removeClass('hide'); } //If it has numbers and characters, increase strength value. if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) { strength += 1; $('.one-number').addClass('text-success'); $('.one-number i').removeClass('fa-times').addClass('fa-check'); $('#popover-password-top').addClass('hide'); } else { $('.one-number').removeClass('text-success'); $('.one-number i').addClass('fa-times').removeClass('fa-check'); $('#popover-password-top').removeClass('hide'); } //If it has one special character, increase strength value. if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) { strength += 1; $('.one-special-char').addClass('text-success'); $('.one-special-char i').removeClass('fa-times').addClass('fa-check'); $('#popover-password-top').addClass('hide'); } else { $('.one-special-char').removeClass('text-success'); $('.one-special-char i').addClass('fa-times').removeClass('fa-check'); $('#popover-password-top').removeClass('hide'); } if (password.length > 7) { strength += 1; $('.eight-character').addClass('text-success'); $('.eight-character i').removeClass('fa-times').addClass('fa-check'); $('#popover-password-top').addClass('hide'); } else { $('.eight-character').removeClass('text-success'); $('.eight-character i').addClass('fa-times').removeClass('fa-check'); $('#popover-password-top').removeClass('hide'); } // If value is less than 2 if (strength < 2) { $('#result').removeClass() $('#password-strength').addClass('progress-bar-danger'); $('#result').addClass('text-danger').text('Very Week'); $('#password-strength').css('width', '10%'); } else if (strength == 2) { $('#result').addClass('good'); $('#password-strength').removeClass('progress-bar-danger'); $('#password-strength').addClass('progress-bar-warning'); $('#result').addClass('text-warning').text('Week') $('#password-strength').css('width', '60%'); return 'Week' } else if (strength == 4) { $('#result').removeClass() $('#result').addClass('strong'); $('#password-strength').removeClass('progress-bar-warning'); $('#password-strength').addClass('progress-bar-success'); $('#result').addClass('text-success').text('Strength'); $('#password-strength').css('width', '100%'); return 'Strong' } } }); |
That’s It. Now you have successfully created jQuery Password Strength Checker With Bootstrap, Password Validation Program. If you have doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Sir which photo editor do you use to create your awesome thumbnails. Sir please tell me. Is it Photoshop or anything else?
Adobe Illustrator
Thanks Sir!
Sir thanks for sharing this but I don’t know where you got the #signup from function.js file. See the code
$(‘#password’).keyup(function() {
var password = $(‘#password’).val();
if (checkStrength(password) == false) {
$(‘#sign-up’).attr(‘disabled’, true);
}
sorry, There was a sing up button I have removed that. And the condition was when validations are not complete then the signup button disabled.
Ok sir, I recoded everything with bootstrap 4.3.1 because that was what my site was built upon and everything worked except the appearance and disappearance of enter your password and password didn’t match. But if I code it separately with bootstrap 3 everything will be ok. Please any help will be accepted. Thanks in anticipation of positive response from you.
yes, you can.
Sir you had done 2 little mistakes in the code out there. First mistake is that you have written the spelling of Weak wrong it is “Weak” and not “Week” and the second mistake is that when our password is strong it shall have shown “Strong” but it shows “Strength”. So, please fix these 2 mistakes. Thanks!
Thanks, Romit! I am fixing these mistakes now.
Excellent, but not fully functional with Bootstrap 4. The messages “Enter strong password” are not hidden.