1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Javascript - Simple Password Strength Meter

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

  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):

    SEMrush
     
    energylevels, Dec 28, 2018 IP
    SEMrush
  2. sarahk

    sarahk iTamer Staff

    Messages:
    25,183
    Likes Received:
    3,428
    Best Answers:
    100
    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:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #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:
    25,183
    Likes Received:
    3,428
    Best Answers:
    100
    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