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>

What topics can I ask about here?, How much research effort is expected of Stack Overflow users? — Andreas
– Andreas, Commented Jul 8, 2022 at 15:14

Saud Haroon · Accepted Answer · 2022-07-08 15:28:08Z

1

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

answered Jul 8, 2022 at 15:28

Saud Haroon

261 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Snorlax Over a year ago

Thanks for the reply, I followed your suggestion and it works fine. The point is that it's all about aesthetics. That is, if I enter the new password without respecting the rules, however saving is allowed, this should not happen.

Naeem Asghar · Accepted Answer · 2022-07-08 15:40:54Z

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;
    });

});

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related