Password Match and Password Strength - Two Pass Fields...

[ejntaylor]

I have two password fields. The second is a confirmation that the password matches the first.

I need to: 1. check score is strong on first field only & 2. confirm two password input fields match.

Then I need to display messaging and allow submission when both criteria are true.

I can do both, but not together. Is that possible? No method to access score on keyup outside function? Any thoughts?

For 1. I'm using keyup as follows and this works:

               if (data.score > 35) {
                    formSecurity.find('.pwd-messages').text("Strong Password");
                    formSecurity.find('#profile-edit-security button[name=submit]').prop("disabled",true);


                } else {
                    formSecurity.find(".pwd-messages").text("Password not strong enough");
                    formSecurity.find('#profile-edit-security button[name=submit]').prop("disabled",true);
                }

As the keyup is only triggered on the first pass field I've added another function outside the callback. You can see I've added a var score (as I thought I might be able to extract the score somehow). This bit of code is kind of how I imagine this working if I could get the score.

Has this been done before? Not sure how to proceed but sure this is not too much of an edge case. Ideas appreciated!

        $(".pass-match-input").keyup(function() {

            var formSecurity = $('form#profile-edit-security');
            var score = 40;


            // check match
            if ($('#password1').val() === $('#password2').val() && score > 35) {
                formSecurity.find('.pwd-messages').text("Strong Password and Matching");
            } else if($('#password1').val() === $('#password2').val() && score < 35) {
                formSecurity.find('.pwd-messages').text("Matching but password not strong.");
            }
            else {
                formSecurity.find('.pwd-messages').text("Not Matching");
        });

[razmous]

Hi, I figure out how to achieve this

jQuery(document).ready(function () {
    var pwstrenght_score;
function PasswordMatch() {
      password = $("#password").val();
      confpassword = $("#confpassword").val();
      
        if (password != confpassword){
   
        $("#submitbutton").prop( "disabled", true );

      } else if(pwstrenght_score >=14){# pw are equals and score is OK

        $("#submitbutton").prop( "disabled", false );
      }else{# passwords are equal but score is not OK

        $("#submitbutton").prop( "disabled", true );

      }
    };
options.common = {
     
      onKeyUp: function (evt, data) {
    
        pwstrenght_score = data.score;
      
      },
};
  $("#password, #confpassword").keyup(PasswordMatch);

you need to set button id <button id="submitbutton" type="button" class="btn btn-primary btn-lg" disabled>Button</button>

[sooslaca]

Here is another version on how to achieve this. Create a pwstrength.overload.js file and include that right after the original js.

Then get the score by $("#element").pwstrength("score")

if (jQuery.fn.pwstrength) {
  (function(){
    var _score = 0
    var _pwstrength = jQuery.fn.pwstrength
    jQuery.fn.pwstrength = function (method) {
      if ( "score" == method ) {
        return _score
      }
      if ( "init" == method || !method ) {
        _pwstrength.apply(this, [{
          common: {
            maxChar: 100,
            onScore: function (options, word, score) {
                _score = score;
                return score
            }
          }
        }])
      } else {
        _pwstrength.apply(this, [method])
      }
    }
  })();
}