为什么我不能使用jQuery的.keypress（）、. keydown（）和.keyup（）事件正确比较两个字符串？

Question

I want to validate two inputs using javascript . I am using jQuery's .keypress() events to directly verify the inputted values. Here's my code in laravel framework:

HTML

<div class="form-group">
    <label for="inputPassword"><h4>Password:</h4></label>
    {{ Form::password('password',array('class'=>'span3 form-control', 'id'=>'password', 'placeholder'=>'Password')) }}
</div>
<div class="form-group">
    <label for="verifyPassword"><h4>Verify Password:</h4></label>
    {{ Form::password('password',array('class'=>'span3 form-control', 'id'=>'verify-password', 'placeholder'=>'Verify Password')) }}
</div>
<div class="form-group">
    <div class="alert alert-danger hide" id="alert-verify-password-remove">
        Password don't match!
        <div class="glyphicon glyphicon-remove alert-icon-padding-remove"></div>
    </div>
</div>
<div class="form-group">
    <div class="alert alert-success hide" id="alert-verify-password-ok">
        Password matched!
        <div class="glyphicon glyphicon-ok alert-icon-padding-ok"></div>
    </div>
</div>

JS

$(document).ready(function(){
        $( "#verify-password" ).keypress(function() {
          // get password value from first password field
          var pwd = $('#password').val();
          // get the 2nd password value from the verify password field
          var vPwd = $('#verify-password').val();
          // verify the values if they are matched
          // if matched then show match alert | hide unmatch alert
          if (pwd == vPwd) {
                $("#alert-verify-password-ok").removeClass('hide');
                $("#alert-verify-password-remove").addClass('hide');
          } // else, show unmatch alert | hide match alert
          else {
                $("#alert-verify-password-remove").removeClass('hide');
                $("#alert-verify-password-ok").addClass('hide');
          }
        });
});

The problem I got is that, If for example I typed on #password field is test then in #verify-password field I have to type tests or any character after the 4th before the validation validates it to be correct/matched. Here's the picture that shows what is happening.

As you can see, I have to type 5 ( tests ) characters instead of 4 ( test ) before it identify that the values are the same. Can someone give me insights what's happening here and at least give me suitable solutions for this. Thank you.

Answer 1

Because keypress occurs before the string is actually changed (And thus you can cancel string change)

Use keyup event for those tests

...
 $( "#verify-password" ).keyup( function() {
...

keyup is fired after string is changed, so the values in test will be the same as the values you see

Answer 2

You need to use keyup , because its triggert after keypress . You can see this for example here

$( "#verify-password" ).keyup( function() {