19

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.

5 Answers 5

33

Use this instead!

onkeyup: function(element) { $(element).valid(); },
onfocusout: function(element) { $(element).valid(); },
2
  • 3
    Thanks, fixed my problem! The plugin's lazy validation should be a setting, so fields are fast validated if needed. Dec 6, 2013 at 11:48
  • This was a great simple solution for me. My issue was that I already had a focusout handler that was modifying the input's value. Setting the onfocusout: false option, and adding the .valid() call to my own focusout handler solved a very tricky async event problem. Sep 9, 2014 at 0:23
16

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" />
4
  • This worked for me... had a few input elements missing the type. Once I added it validation worked perfectly on those elements. Not sure why this hasn't been selected as the answer. Aug 29, 2012 at 18:12
  • 2
    All of my inputs are specifying the type and I am having the same issue. If I start typing it doesn't trigger the validator until I click off the input (blur). But when I go back into the input and type, the keyup acts as expected after each stroke thereafter. Its just the first click/type that isnt working as expected. Going to have to manually add onkeyup events to re-trigger validator... disappointing. Mar 19, 2013 at 13:05
  • 4
    EDIT: This explains the behavior, the docs state "Before a field is marked as invalid, the validation is lazy: Before submitting the form for the first time, the user can tab through fields without getting annoying messages - he won't get bugged before he had the chance to actually enter a correct value" Mar 19, 2013 at 14:23
  • What is the significance of ^c in the id attribute? Nov 24, 2013 at 11:40
2

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.

2

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).

0

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 '[email protected]', 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

1
  • Thanks for the response. Actually I am trying to do exactly what's happening in the demo link you sent. I just want the default/standard behavior of error message going away once user takes an action to that effect. You can also see that from the jsfiddle link I sent.
    – Chantz
    Oct 16, 2011 at 18:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.