jquery validate: focusCleanup: true and focusInvalid: false don't work as expected

Question

I am using Joern's jquery validation plugin 1.6.

My goal is to have the following behavior: remove the error message for an element once the user focuses it. From what I understand setting 'focusCleanup: true' should take care of this.

However (at least on my browser (Firefox 3.5.7 on Linux)), I only get the desired behavior (ie, error message for a field disappearing once you focus it) if I click into the field; it doesn't handle tabbing into the field correctly.

Sample code:

HTML:

   <form id='abc' name='abc'>
    <input type="text" id="t1" name="t1"/>
    <input type="text" id="t2" name="t2"/>
    <input type="submit" id="submit" value='submit'/> 
    </form>

JS:

   $("#abc").validate({
   focusCleanup: true,
   focusInvalid: false,

    rules: {t1: {required: true, email:true}, t2: {required: true,email:true}}
});

I am setting 'focusInvalid: false' because the docs say one should avoid combining focusCleanup and focusInvalid; in my experience commenting out that line makes no difference.

Am I doing something wrong?

Solution

What you are experiencing is the correct behavior, just maybe a bit counter-intuitive. You can see your code in a demo here. When you click, you're only focusing the textbox, however when you tab you're causing 2 events that matter, you're triggering both focusin and keyup.

Since you're triggering the keyup what's happening is it is clearing the error, but because you're typing something in they box (it doesn't distinguish tab from any other key, like a letter)...but then it's re-evaluating whether the box is valid on every keyup, displaying the same error as before since the tab didn't have any effect on that...since it didn't add any text.

If you want to disable onkeyup validation it'll stop doing that, like this:

$("#abc").validate({
  focusCleanup: true,
  rules: {t1: {required: true, email:true}, t2: {required: true,email:true}},
  onkeyup: false,
});​

For comparison, here's that code in a demo, so you can compare it with the original demo above.