Question

I’m scratching my head on this one. We have a page and are using jQuery and the validation plugin.

We have a form with multiple inputs and each one is governed by rules set for the validation plugin. An interesting bug has been found – typing into one of these inputs and then mouse clicking on one of the other inputs sometimes causes the cursor to jump to a normally non-editable page element (such as an li or a label). We are then freely able to type, allowing text to appear out of place, where it normally wouldn’t. Curiously, pressing the up cursor key brings up the autocomplete box, positioned correctly by the element you clicked on.

It seems that although some built-in browser events are still attached to the input elements, textual input is not one of them. The generated source reveals plain text inserted by a user, such as:

<li>dshosdsdh<a href=”link.html”>This is a link</a></li>

There is no inline-editing plugins used within the site. This ‘feature’ only appears to affect IE6, which must be supported for our users.

I unfortunately cannot reveal any of the source code associated with this project, but if you’ve ever heard of anything like this before I’d love to hear from you.

Answer 1

I also came across this all the exact same problem while using jquery 1.6.1 and validate 1.8.1. I have custom error messages that are inserted before the input field under the label and the validation is run when focus is lost on the field.

Anyway, its not elegent but a quick fix for it is to add a short timeout around the error placement logic. The timedelay doesnt produce any lag that is really noticeable to the user and solves the problem:

$(yourform).validate({
    onfocusout: function(element){$(element).valid();},
    errorPlacement: function(error, element) {
        setTimeout(function (){
            //....custom error placement code
        }, 50);
    }
});

I think the problem is something to do with how IE6 indexs and the insertion seems to be confusing where the index reference is for the next input field if the error message is inserted before it refocuses. So IE6 puts the cursor in the wrong place, thinking its in the next input field you selected, allowing you to freely type on the page.