jQuery check if two passwords match -


so i'm busy on system, includes registration users. need jquery check if password , password confirmation matching. i've come with:

$("#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>

but reason, doesn't work. happens when type 2 identical passwords, shows .nosamepass. when passwords different, shows. won't go away when first mismatch them, , correct it.

the .nosamepass hidden through external css file.

how solve this?

edit

i found out, when put 'a' in both input fields, says aren't alike. when put in second character in #pass2 (the second input field), says they're alike. aren't.

tj crowder gave correct explanation, think makes more sense change listener '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>


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -