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

Question

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.

Answer 1

Use this instead!

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

Answer 2

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" />