Reputation: 63
I'm trying to create a simple password strength indicator with javascript by changing the value of the html5 progress element, but somethings wrong, can somebody point out the error here please? Console is showing zero errors and it must be something to do with change function not binding to the input with ID 'pwd'?
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Password Meter</title>
<script>
window.addEventListener('load', function() {
var password = document.getElementById("pwd");
password.addEventListener('change', function() {
// Reset if password length is zero
if (password.length === 0) {
document.getElementById("progresslabel").innerHTML = "";
document.getElementById("progress").value = "0";
return;
}
// Password requirements
var match = new Array();
match.push("[$@$!%*#?&]"); // Special Chars
match.push("[A-Z]"); // Uppercase
match.push("[0-9]"); // Numbers
match.push("[a-z]"); // Lowercase
// Check progress
var prog = 0;
for (var i = 0; i < match.length; i++) {
if (new RegExp(match[i]).test(password)) {
prog++;
}
}
//Length must be at least 8 chars
if(prog > 2 && password.length > 7){
prog++;
}
// Display it
var progress = "";
var strength = "";
switch (prog) {
case 0:
case 1:
case 2:
strength = "25%";
progress = "25";
break;
case 3:
strength = "50%";
progress = "50";
break;
case 4:
strength = "75%";
progress = "75";
break;
case 5:
strength = "100% - Password strength is good";
progress = "100";
break;
}
document.getElementById("progresslabel").innerHTML = strength;
document.getElementById("progress").value = progress;
});
});
</script>
</head>
<body>
<form>
<div>
<label for="pwd">Password:</label>
<input type="text" id="pwd">
<progress id="progress" value="0" max="100">70</progress>
<span id="progresslabel"></span></div>
</form>
</body>
</html>
Upvotes: 0
Views: 9136
Reputation: 45
var password = document.querySelector('#pwd');
password.onkeyup = function (event) {
handleChange(password)
}
function handleChange(password) {
var pwd = password.value
var progresslabel = document.querySelector('#progresslabel')
var progress = 0;
var strength = '0';
switch (pwd.length) {
case 1:
strength = '12.5%';
progress = 12;
break;
case 2:
strength = '25%';
progress = 25;
break;
case 3:
strength = '37.5%';
progress = 37.5;
break;
case 4:
strength = '50%';
progress = 50;
break;
case 5:
strength = '62.5%';
progress = 62.5;
break;
case 6:
strength = '75%';
progress = 75;
break;
case 7:
strength = '87.5%';
progress = 87.5;
break;
case 8:
strength = '100% - Password strength is good';
progress = 100;
break;
}
// Number, a CAPS, lowercaps and special character.
let regexp = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-])/;
if (regexp.test(pwd)) {
// Display it
progresslabel.innerHTML = strength;
document.getElementById("progress").value = progress;
} else {
progresslabel.innerHTML = '1 Cap, 1 digit, 8 digits atleast.'
}
}
<form>
<div>
<label for="pwd">Password:</label>
<input type="text" id="pwd">
<progress id="progress" value="0" max="100">70</progress>
<span id="progresslabel"></span>
</div>
</form>
I think this is the right way to do it, using querySelector and keyup handler.
Upvotes: 0
Reputation: 555
jQuery.strength = function( element, password ) {
var desc = [{'width':'0px'}, {'width':'20%'}, {'width':'40%'}, {'width':'60%'}, {'width':'80%'}, {'width':'100%'}];
var descClass = ['', 'progress-bar-danger', 'progress-bar-danger', 'progress-bar-warning', 'progress-bar-success', 'progress-bar-success'];
var score = 0;
if(password.length > 6){
score++;
}
if ((password.match(/[a-z]/)) && (password.match(/[A-Z]/))){
score++;
}
if(password.match(/\d+/)){
score++;
}
if(password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)){
score++;
}
if (password.length > 10){
score++;
}
element.removeClass( descClass[score-1] ).addClass( descClass[score] ).css( desc[score] );
};
jQuery(function() {
jQuery("#pwd").keyup(function() {
jQuery.strength(jQuery("#progress-bar"), jQuery(this).val());
});
});
form {
max-width: 400px;
padding: 2em;
border:1px dashed #ddd
}
#pwd{
border-radius:50px;
padding: 10px 20px;
border:2px solid #999;
}
*:focus {
outline-style: none;
}
input {
display: block;
width: 100%;
box-sizing: border-box;
padding: 6px;
border: 1px solid #ddd;
}
#progressBar {
height: 20px;
width: 100%;
margin-top: 0.6em;
border-radius:50px;
border:2px solid #ddd
}
#progress-bar {
width: 0%;
height: 100%;
transition: width 500ms linear;
border-radius:50px;
box-shadow:0px 1px 5px #555
}
.progress-bar-danger {
background: #d00;
}
.progress-bar-warning {
background: #f50;
}
.progress-bar-success {
background: #080;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3> Password Strength Using JAVASCRIPT.</h3>
<form name="passwordStrengthBox">
<div class="passBox">
<input type="text" id="pwd" autocomplete="off" placeholder="Enter Passwords">
<div id="progressBar">
<div id="progress-bar"></div>
</div>
</div>
</form>
Upvotes: 2
Reputation: 14927
A few issues:
keyup
method instead of the change
event so that the strength is re-evaluated whenever the password changes (change
only fires on blur)password
refers to pwd
element but your code is treating it as the input value - I added a pwd
variable in the function which is the password
element's valuereduce
I used is functionally equivalent to your codevar password = document.getElementById("pwd");
password.addEventListener('keyup', function() {
var pwd = password.value
// Reset if password length is zero
if (pwd.length === 0) {
document.getElementById("progresslabel").innerHTML = "";
document.getElementById("progress").value = "0";
return;
}
// Check progress
var prog = [/[$@$!%*#?&]/, /[A-Z]/, /[0-9]/, /[a-z]/]
.reduce((memo, test) => memo + test.test(pwd), 0);
// Length must be at least 8 chars
if(prog > 2 && pwd.length > 7){
prog++;
}
// Display it
var progress = "";
var strength = "";
switch (prog) {
case 0:
case 1:
case 2:
strength = "25%";
progress = "25";
break;
case 3:
strength = "50%";
progress = "50";
break;
case 4:
strength = "75%";
progress = "75";
break;
case 5:
strength = "100% - Password strength is good";
progress = "100";
break;
}
document.getElementById("progresslabel").innerHTML = strength;
document.getElementById("progress").value = progress;
});
<form>
<div>
<label for="pwd">Password:</label>
<input type="text" id="pwd">
<progress id="progress" value="0" max="100">70</progress>
<span id="progresslabel"></span>
</div>
</form>
Upvotes: 4