How we can create a password validator program using bootstrap and JS? Solution: See this Bootstrap Password Strength Validation Checker, Bootstrap & jQuery.
Previously I have shared some Password Strength Checker program, but this program is based on Bootstrap UI. Basically, nowadays most of the website is based on bootstrap because of its responsive design feature, even most of the WordPress themes are based on it. And bootstrap has it own prebuilt password validation feature for helping the user to choose a strong password. There are many examples they have given on their website, this is also one of them with some modifications.
Today you will learn to create a Bootstrap and jQuery based password validator for forms like signup and change password. Basically, there is a heading, a password input field, a button with an eye closed/open icon, some texts, a progress bar, and a submit button. The show and hide button have an eye icon on the right side of the password input. By clicking it you can show and hide characters and below the input, there is some text to tell the user what type of pass they have to choose. And the progress bar will tell the password strength and it will change color, fill-percentage, and text according to the password.
So, Today I am sharing Bootstrap Password Strength Validation Checker. There I have used the bootstrap library for creating the program. And as we know Bootstrap can’t run without jQuery that’s why there I have linked jQuery also. The whole UI style is based on bootstrap, there are very less custom CSS. You can use this validator program on your project.
If you are thinking now how this validation program actually is, then see the preview given below.
Preview Of Password Validator With Progress Bar
See this video preview to getting an idea of how this program looks like.
Live Demo
Now you can see this visually, also you 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:
Bootstrap Password Strength Validation Checker Source Code
Before sharing source code, let’s talk about it. First I have created the layout using the bootstrap grid system and pre-built class names. There are many pre-built class and ID names for creating programs and elements easily because it is a library of HTML CSS JS. Also in the HTML file, I have linked other files like CSS, JS, Bootstrap CDN, and jQuery CDN.
Now using CSS I have done a few things like the width of the program, button color, margin, padding, etc. Because this program is based on a library that’s why there are very few lines of CSS codes. Also, I have used a google font for the heading and other texts. Other all styles are based on bootstrap CSS.
JS handling the main part or feature of this program, and some features are based on bootstrap’s JS file. Inside the JavaScript file, I have created the validation program. First I have declared characters which should be in password to make it strong, I have created 3 sections of it first for telling the extra strong, strong, and moderate pass strength. Now the password strength show and the progress bar is based on JS if{} else{} statements, it will react according to putted characters in the input field.
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program, you have to create 3 files. First file for HTML, second for CSS, and the third file 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 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Password Strength Validator | Webdevtrick.com</title> <link href="https://fonts.googleapis.com/css?family=Muli:400,600&display=swap" rel="stylesheet"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content"> <div class="content__inner"> <div class="container"> <div class="row"> <div class="col-lg-6 m-auto"> <form class="password-strength form p-4"> <h3 class="form__title text-center mb-4">Enter the Password</h3> <div class="form-group"> <label for="password-input">Password</label> <div class="input-group"> <input class="password-strength__input form-control" type="password" id="password-input" aria-describedby="passwordHelp" placeholder="Enter password"/> <div class="input-group-append"> <button class="password-strength__visibility btn btn-outline-secondary" type="button"><span class="password-strength__visibility-icon" data-visible="hidden"><i class="fas fa-eye-slash"></i></span><span class="password-strength__visibility-icon js-hidden" data-visible="visible"><i class="fas fa-eye"></i></span></button> </div> </div><small class="password-strength__error text-danger js-hidden">This symbol is not allowed!</small><small class="form-text text-muted mt-2" id="passwordHelp">Add 9 charachters or more, lowercase letters, uppercase letters, numbers and symbols to make the password really strong!</small> </div> <div class="password-strength__bar-block progress mb-4"> <div class="password-strength__bar progress-bar bg-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <button class="password-strength__submit btn btn-success d-flex m-auto" type="button" disabled="disabled">Submit</button> </form> </div> </div> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/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 27 28 29 30 31 32 33 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Muli', sans-serif; font-size: 16px; color: #2c2c2c; } body a { color: inherit; text-decoration: none; } .content { width: 95%; margin: 0 auto 50px; margin-top: 15%; } .password-strength { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); } .js-hidden { display: none; } .btn-outline-secondary { color: #28a745; border-color: #28a745; } .btn-outline-secondary:hover { background: #28a745; } |
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 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 |
// Code By Webdevtrick ( https://webdevtrick.com ) DOM = { passwForm: '.password-strength', passwErrorMsg: '.password-strength__error', passwInput: document.querySelector('.password-strength__input'), passwVisibilityBtn: '.password-strength__visibility', passwVisibility_icon: '.password-strength__visibility-icon', strengthBar: document.querySelector('.password-strength__bar'), submitBtn: document.querySelector('.password-strength__submit') }; //need to append classname with '.' symbol const findParentNode = (elem, parentClass) => { parentClass = parentClass.slice(1, parentClass.length); while (true) { if (!elem.classList.contains(parentClass)) { elem = elem.parentNode; } else { return elem; } } }; //*** MAIN CODE const getPasswordVal = input => { return input.value; }; const testPasswRegexp = (passw, regexp) => { return regexp.test(passw); }; const testPassw = passw => { let strength = 'none'; const moderate = /(?=.*[A-Z])(?=.*[a-z]).{5,}|(?=.*[\d])(?=.*[a-z]).{5,}|(?=.*[\d])(?=.*[A-Z])(?=.*[a-z]).{5,}/g; const strong = /(?=.*[A-Z])(?=.*[a-z])(?=.*[\d]).{7,}|(?=.*[\!@#$%^&*()\\[\]{}\-_+=~`|:;"'<>,./?])(?=.*[a-z])(?=.*[\d]).{7,}/g; const extraStrong = /(?=.*[A-Z])(?=.*[a-z])(?=.*[\d])(?=.*[\!@#$%^&*()\\[\]{}\-_+=~`|:;"'<>,./?]).{9,}/g; if (testPasswRegexp(passw, extraStrong)) { strength = 'extra'; } else if (testPasswRegexp(passw, strong)) { strength = 'strong'; } else if (testPasswRegexp(passw, moderate)) { strength = 'moderate'; } else if (passw.length > 0) { strength = 'weak'; } return strength; }; const testPasswError = passw => { const errorSymbols = /\s/g; return testPasswRegexp(passw, errorSymbols); }; const setStrengthBarValue = (bar, strength) => { let strengthValue; switch (strength) { case 'weak': strengthValue = 25; bar.setAttribute('aria-valuenow', strengthValue); break; case 'moderate': strengthValue = 50; bar.setAttribute('aria-valuenow', strengthValue); break; case 'strong': strengthValue = 75; bar.setAttribute('aria-valuenow', strengthValue); break; case 'extra': strengthValue = 100; bar.setAttribute('aria-valuenow', strengthValue); break; default: strengthValue = 0; bar.setAttribute('aria-valuenow', 0);} return strengthValue; }; //also adds a text label based on styles const setStrengthBarStyles = (bar, strengthValue) => { bar.style.width = `${strengthValue}%`; bar.classList.remove('bg-success', 'bg-info', 'bg-warning'); switch (strengthValue) { case 25: bar.classList.add('bg-danger'); bar.textContent = 'Weak'; break; case 50: bar.classList.remove('bg-danger'); bar.classList.add('bg-warning'); bar.textContent = 'Moderate'; break; case 75: bar.classList.remove('bg-danger'); bar.classList.add('bg-info'); bar.textContent = 'Strong'; break; case 100: bar.classList.remove('bg-danger'); bar.classList.add('bg-success'); bar.textContent = 'Extra Strong'; break; default: bar.classList.add('bg-danger'); bar.textContent = ''; bar.style.width = `0`;} }; const setStrengthBar = (bar, strength) => { //setting value const strengthValue = setStrengthBarValue(bar, strength); //setting styles setStrengthBarStyles(bar, strengthValue); }; const unblockSubmitBtn = (btn, strength) => { if (strength === 'none' || strength === 'weak') { btn.disabled = true; } else { btn.disabled = false; } }; const findErrorMsg = input => { const passwForm = findParentNode(input, DOM.passwForm); return passwForm.querySelector(DOM.passwErrorMsg); }; const showErrorMsg = input => { const errorMsg = findErrorMsg(input); errorMsg.classList.remove('js-hidden'); }; const hideErrorMsg = input => { const errorMsg = findErrorMsg(input); errorMsg.classList.add('js-hidden'); }; const passwordStrength = (input, strengthBar, btn) => { //getting password const passw = getPasswordVal(input); //check if there is an error const error = testPasswError(passw); if (error) { showErrorMsg(input); } else { //hide error messages hideErrorMsg(input); //finding strength const strength = testPassw(passw); //setting strength bar (value and styles) setStrengthBar(strengthBar, strength); //unblock submit btn only if password is moderate or stronger unblockSubmitBtn(btn, strength); } }; const passwordVisible = passwField => { const passwType = passwField.getAttribute('type'); let visibilityStatus; if (passwType === 'text') { passwField.setAttribute('type', 'password'); visibilityStatus = 'hidden'; } else { passwField.setAttribute('type', 'text'); visibilityStatus = 'visible'; } return visibilityStatus; }; const changeVisibiltyBtnIcon = (btn, status) => { const hiddenPasswIcon = btn.querySelector(`${DOM.passwVisibility_icon}[data-visible="hidden"]`); const visibilePasswIcon = btn.querySelector(`${DOM.passwVisibility_icon}[data-visible="visible"]`); if (status === 'visible') { visibilePasswIcon.classList.remove('js-hidden'); hiddenPasswIcon.classList.add('js-hidden'); } else if (status === 'hidden') { visibilePasswIcon.classList.add('js-hidden'); hiddenPasswIcon.classList.remove('js-hidden'); } }; const passwVisibilitySwitcher = (passwField, visibilityToggler) => { const visibilityStatus = passwordVisible(passwField); changeVisibiltyBtnIcon(visibilityToggler, visibilityStatus); }; //EVENT LISTENERS DOM.passwInput.addEventListener('input', () => { passwordStrength(DOM.passwInput, DOM.strengthBar, DOM.submitBtn); }); const passwVisibilityBtn = document.querySelector(DOM.passwVisibilityBtn); passwVisibilityBtn.addEventListener('click', e => { let toggler = findParentNode(e.target, DOM.passwVisibilityBtn); passwVisibilitySwitcher(DOM.passwInput, toggler); }); |
That’s It. Now you have successfully created Bootstrap Password Strength Validation Checker, Bootstrap & jQuery based validator. If you have any doubt or questions comment down below.
Thanks For Visiting, Keep Visiting.
