Javascript form validation "onKeyup vs on keydown"

Question

Group, I have a quick question? -Is there a way to trigger this onclick event when the last keypress is up.

for example: verify that newPwd==reTypePwd on the last keyup in reTypePwd text box. If my password is foo I would like for the event to trigger on "o" and not "f".

function allClear() {
 var newPasswd = document.getElementById('newPwd');
 var reTypePasswd = document.getElementById('reTypePwd');

 newPasswd.value = "";
 reTypePasswd.value = "";
 return true;
}
function validate()
 {
   var currPwd = document.getElementById("currPwd").value;
   var newPwd = document.getElementById("newPwd").value;
   var confirmNP = document.getElementById("reTypePwd").value;
   if(currPwd == "" || newPwd == "")
   {
      document.getElementById("btnChange").disabled = true;
      if(confirmNP!=newPwd){
      document.getElementById("confirm").value = "Doesn't Match";
    }
 }
     if(confirmNP!=newPwd)
     {
     document.getElementById("newPwd").style.cssText = "border-color:Red";
     document.getElementById("reTypePwd").style.cssText = "border-color: Red"; 
     } 
     else {
           document.getElementById("btnChange").disabled = false;
           document.getElementById("newPwd").style.cssText = "border-color:none";
           document.getElementById("reTypePwd").style.cssText = "border-color: none"; 

            }
          }

Thanks

Chad

Answer 1

You shouldn't exclusively use onkeyup or onkeydown for detecting user input. They don't catch the edge cases such as cut, paste, drag and drop or spell checker corrections. You should use the HTML 5 event, oninput where available (Firefox 2+, Google Chrome, Safari 4+, Opera 10) and Internet Explorer's onpropertychange event. For browsers that don't support either event, you can fall back to onkeydown with a 0ms timer for the check, which is a little better than onkeyup.

I wrote a blog post outlining this very subject, just two days ago, hopefully it will help you.

PS. Don't forget to revisit other questions you have asked and accept some answers.

Answer 2

I'm guessing "when the last keypress is up" means when the two password fields contain values of the same length? If so, then have the keyup event listener first check the length of the values. For example, don't try to validate until the 2nd password length is equal or longer than the length of the 1st password. Of course, if the 2nd is longer than the first, it fails validation :)