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
Post a Comment