jQuery проверить, соответствуют ли два пароля

Question

Итак, я занят этой системой, которая включает регистрацию для пользователей. Теперь мне нужно jQuery, чтобы проверить, соответствуют ли пароль и подтверждение пароля. Это то, что я придумал:

$("#pass2").keypress(function() { 
 
    if ($("#pass1").val() != $("#pass2").val()) { 
 
    $(".nosamepass").fadeIn('slow'); 
 
    $("#choosepass > input").css("border", "5px solid #ff0033"); 
 
    } else { 
 
    $(".nosamepass").fadeOut('slow'); 
 
    $("#choosepass > input").css("border", "5px solid #232323"); 
 
    } 
 
});

.nosamepass { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="choosePass"> 
 
    <h1>{{goodgoing}}<span id="name2"></span></h1> 
 
    <h2>{{choosepassword}}</h2> 
 
    <h3>{{almostthere}}</h3> 
 

 
    <input name="pass1" id="pass1" type="password" class="password" placeholder="{{password}}"> 
 
    <input name="pass2" id="pass2" type="password" class="password" placeholder="{{password2}}"> 
 

 
    <div class="nosamepass">TEST</div> 
 
    <button id="regme" disabled="disabled">{{finishregister}} ></button> 
 
</div>

Но по какой-то причине, это не работает. Случается, что когда я набираю 2 одинаковых пароля, он показывает .nosamepass. Когда пароли отличаются друг от друга, это также показывает. Также он не исчезнет, ​​когда я сначала их не улажу, а затем исправлю.

.nosamepass скрыт за пределами внешнего файла CSS.

Как это решить?

EDIT

Я только что узнал, что, когда я ставлю «а» в обоих полях ввода, он говорит, что они не похожи друг на друга. Когда я помещаю второй символ в #pass2 (второе поле ввода), тогда он говорит, что они похожи. Но это не так.

Answer 1

TJ Crowder уже дал правильное объяснение, но я думаю, что это имеет смысл, чтобы изменить ваш слушатель '' KeyUp

$("#pass2").keyup(function() { 
 
    if ($("#pass1").val() != $("#pass2").val()) { 
 
    $(".nosamepass").fadeIn('slow'); 
 
    $("#choosepass > input").css("border", "5px solid #ff0033"); 
 
    } else { 
 
    $(".nosamepass").fadeOut('slow'); 
 
    $("#choosepass > input").css("border", "5px solid #232323"); 
 
    } 
 
});

.nosamepass { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="choosePass"> 
 
    <input name="pass1" id="pass1" type="password" class="password" placeholder="{{password}}"> 
 
    <input name="pass2" id="pass2" type="password" class="password" placeholder="{{password2}}"> 
 

 
    <div class="nosamepass">Passwords Don't Match</div> 
 
</div>

Answer 2

Проблема заключается в том, что при запуске keypress значение input еще не обновлено (поскольку вы можете предотвратить действие по умолчанию, которое обновляет значение ввода).

Вы можете использовать setTimeout(..., 0) трюк, чтобы вызвать ваш код после того, как событие завершает:

$("#pass2").keypress(function() { 
 
    setTimeout(function() { 
 
    if ($("#pass1").val() != $("#pass2").val()) { 
 
     $(".nosamepass").fadeIn('slow'); 
 
     $("#choosepass > input").css("border", "5px solid #ff0033"); 
 
    } else { 
 
     $(".nosamepass").fadeOut('slow'); 
 
     $("#choosepass > input").css("border", "5px solid #232323"); 
 
    } 
 
    }, 0); 
 
});

<div id="choosePass"> 
 
    <h1>{{goodgoing}}<span id="name2"></span></h1> 
 
    <h2>{{choosepassword}}</h2> 
 
    <h3>{{almostthere}}</h3> 
 
    <input name="pass1" id="pass1" type="password" class="password" placeholder="{{password}}"> 
 
    <input name="pass2" id="pass2" type="password" class="password" placeholder="{{password2}}"> 
 
    <div class="nosamepass">TEST</div> 
 
    <button id="regme" disabled="disabled">{{finishregister}} ></button> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>