Javascript - Simple Password Strength Meter

Discussion in 'JavaScript' started by energylevels, Dec 28, 2018.

0
  1. #1
    I am trying to create a simple password stregnth indicator with javascript and the html5 progress element, something's wrong it don't work but no console errors, any suggestions please help?:

    <!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>
<style>
progress {
    -webkit-appearance: none;
    appearance: none;
    max-width: 120px;
    margin: 0 2px;
}
progress[value] {
    color: #777
} /* IE10 */
    progress::-webkit-progress-bar {
background:#ccc;
}
    progress::-webkit-progress-value {
background:#777
}
    progress::-moz-progress-bar {
background:#777;
}
</style>
</head>
<body>
<form>
    <div>
        <label for="pwd">Password:</label>
        <input type="text" id="pwd">
        <progress id="progress" value="0" max="100" data-label="password strength">70</progress>
        <span id="progresslabel"></span></div>
</form>
</body>
</html>
    Code (markup):

     
    energylevels, Dec 28, 2018 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,821
    Likes Received:
    4,539
    Best Answers:
    123
    Trophy Points:
    665
    #2
    Change lines 7 and 8 to

    var passwordInput = document.getElementById("pwd");
passwordInput.addEventListener('change', function() {
password = passwordInput.value;
    HTML:
    Essentially you were testing html and not the value of the input field
     
    sarahk, Dec 28, 2018 IP
  3. energylevels

    energylevels Member

    Messages:
    9
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #3
    thanks that was a great help, I also changed:

    passwordInput.addEventListener('change', function() {
    Code (markup):
    to

    passwordInput.addEventListener('input', function() {
    Code (markup):
    for some reason 'change' doesn't update the progress element as you type whereas 'input' does. I don't know why?
     
    energylevels, Dec 28, 2018 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,821
    Likes Received:
    4,539
    Best Answers:
    123
    Trophy Points:
    665
    #4
    I didn't know input was an event, I'd have normally used keyup
    change waits for another part of the page to take the focus before it checks for the change
     
    sarahk, Dec 28, 2018 IP