Using jQuery validate plugin: onfocusout, onkeyup notworking as expected on production site

问题

I am using jQuery Validate plugin v.1.9.0 it works very nicely. But I am facing this issue, once the user submits the form & if there are any errors, it correctly display error message. The problem is that it does not update the message if the user takes an action to remedy that error. E.g. if a field is required, upon getting the message the first time, user starts typing, then that message should go away.

In the docs it mentions that onfocusout & onkeyup are used for this purpose & by default they are set to true. The funny thing is it seems to work on my local workstation but it fails (silently) once I upload my code to production site. I thought I was messing it up royally somehow so I fired up jsfiddle and put relevant code to see if it happens there as well.

I was amazed to see it happens there as well. So my question is why does it work on my local machine but not on production sites?

P.S. Self-contained example at http://jsfiddle.net/tankchintan/cge44/5/

UPDATE

To replicate the issue, do -

1. Go to the jsfiddle page.
2. Without filling out any fields hit submit the form.
3. It will show error message besides each field.
4. Now start typing in any one of the fields.
5. You will notice that the error message doesnt go away, even though the rule is satisfied. On my local machine that error mesaage does go away, once I type anything in the field.

回答1:

This problem even exists in some of the examples on the JQuery website.

I found that the problem occurs when the input element has no type. Web browsers assume that the type is "text" if not specified, but jquery.validate has a problem with that. Your input element should look like this:

<input id="cname" name="name" type="text" class="required" minlength="2" />

回答2:

Use this instead!

onkeyup: function(element) { $(element).valid(); },
onfocusout: function(element) { $(element).valid(); },

回答3:

Apparently this doesn't work if your jQuery library is too new. I was experiencing the same thing, rolling back from jquery v1.7.2 to v1.3.2 fixed the problem.

The example page at http://jquery.bassistance.de/validate/demo/ uses 1.3.2, but I'm not sure which specific version of jquery this breakage occurred in.

回答4:

The following works for me:

$(document).ready(function () {
        $("#myFormElement").submit(function (event) {
            var validator = $.data($('form')[0], 'validator');
            validator.settings.onfocusout = function (element) { $(element).valid(); };
            validator.settings.onkeyup = function (element) { $(element).valid(); };
        });

        var validator = $.data($('form')[0], 'validator');
        validator.settings.onfocusout = false;
        validator.settings.onkeyup = false;
    });

This disables initial onkeyup validation. If the user then clicks submit, we re-enable validation so that once the field is valid, he/she is given immediate feedback.

I'm not sure why these properties are boolean initially and then callbacks on the submit event. I only found the method by setting the properties to true in the submit event, which caused an exception in the validation library (was attempting the call function).

回答5:

I think the default behaviour is to only hide that message when the field validates e.g. 'Please enter a valid email address' disappears after you enter 'foo@example.com', which I think makes sense.

See demos: http://jquery.bassistance.de/validate/demo/

I think you might be trying to do something similar to this: jquery validate: focusCleanup: true and focusInvalid: false don't work as expected

来源：https://stackoverflow.com/questions/7786021/using-jquery-validate-plugin-onfocusout-onkeyup-notworking-as-expected-on-prod