How to add password strength meter to input fields with Javascript?

Question

I would like to add a password strength meter to the change password form. I would like to understand how this is possible with javascript and how I can set if the password must contain at least a minimum of characters made up of uppercase, lowercase, numbers etc.

Can anyone help me understand how to do it or if there are any references? I am quite new to this and am trying to learn. I appreciate any help, thanks.

/* Show Hide Password */    
function showPassword(targetID) {
    var pw = document.getElementById(targetID);
    if (pw.type === "password") {
      pw.type = "text";
    } else {
      pw.type = "password";
    }
  }

fieldset { 
  border: 0!important; margin: 0!important; padding: 5px!important; 
}

/*Input fields*/
input.field-settings {
    width: 100%;
  border-radius: 4px!important;
  border: 2px solid #efefef!important;
  padding: 12px!important;
    margin-bottom: 6px;
  height: 40px;
}

input.field-settings:focus {
  border: 2px solid #6FA4F2!important;
}

input.field-settings.disabled {
    background: var(--e-global-color-2606bfd);
    color: var(--e-global-color-43596cc);
}

label.t2 {
    font-size: 14px!important;
    line-height: 1.5em!important;
    font-weight: 500!important;
    margin-bottom: 6px!important;
    display: block;
}

span.t4-light {
    margin: 0 6px;
    display: block;
    font-style: italic;
}

/*Toggle Password*/
.togglePw { display: none; margin-bottom: 0;}

.togglePw + label:before { 
    content: "\f06e"; 
    font: var(--fa-font-solid); 
    margin-bottom: 6px; 
    margin-left: -30px; 
    display: block;
    color: #8C9099;
}

.togglePw:checked + label:before { 
    content: "\f070"; 
    font: var(--fa-font-solid);
    margin-bottom: 6px; 
    margin-left: -30px; 
    display: block;
    color: #1E70EB;
}

.input-group { display: flex; align-items: center; }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>

<fieldset>  
<p class="">
  <label class="t2" for="password_current">Enter the current password (leave blank to not change)</label>
  <div class="input-group">
   <input type="password" class="field-settings" name="password" id="password_current" autocomplete="off"/>
   <input type="checkbox" class="togglePw" id="pw_current" onclick="showPassword('password_current')"/>
   <label for="pw_current" class="fa"></label>
  </div>
</p>

<p class="">
  <label class="t2" for="password_1">Enter your new password</label>
  <div class="input-group">
   <input type="password" class="field-settings" name="password_1" id="password_1" autocomplete="off" />
   <input type="checkbox" class="togglePw" id="pw_1" onclick="showPassword('password_1')"/>
   <label for="pw_1" class="fa"></label>
  </div>
</p>

<p class="">
  <label class="t2" for="password_2">Repeat your new password</label>
  <div class="input-group">
   <input type="password" class="field-settings" name="password_2" id="password_2" autocomplete="off" />
   <input type="checkbox" class="togglePw" id="pw_2" onclick="showPassword('password_2')"/>
   <label for="pw_2" class="fa"></label>
  </div>
</p>
</fieldset>

Answer 1

Visit this link I hope it would help you

http://jsfiddle.net/9SUWP/

<form namRune="Login" method="post" action="">
    <fieldset>
        <legend>Password Strength</legend>        
        <input type="password" name="pass" id="pass">
        <span id="passstrength"></span>
    </fieldset>
</form>       

$(document).ready(function() {

    $('#pass').keyup(function(e) {
        var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
        var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var enoughRegex = new RegExp("(?=.{6,}).*", "g");
        if (false === enoughRegex.test($(this).val())) {
            $('#passstrength').html('More Characters');
        } else if (strongRegex.test($(this).val())) {
            $('#passstrength').className = 'ok';
            $('#passstrength').html('Strong!');
        } else if (mediumRegex.test($(this).val())) {
            $('#passstrength').className = 'alert';
            $('#passstrength').html('Medium!');
        } else {
            $('#passstrength').className = 'error';
            $('#passstrength').html('Weak!');
        }
        return true;
    });

});

Answer 2

you need to add button below this from and add functionality on click event listener you could check length of string, at least one upperCase and special char. if your condition gone false. you could render error message by using Alert or Toast message also.

Note: for ready-cooked functions are available at google. one of link for your reference are below.

password_validator

Happy coding