Question

I’m have a form set up which allows users to register with our mobile site. It has basic javascript validation using the jQuery validation plugin. However, our form submission script also performs validation. For this reason, if an error is caught the server sends an HTTP redirect back to the error page with some $_GET data.

When you load the form page, any errors found in the $_GET array are output to their respective field in a <div class="error">. This works great.

Since jQuery validator and our PHP script both perform the same validation, it makes sense that they should output errors to the same div.error field. This would also (theoretically) get rid of the error message once the field is validated.

However, if I change errorElement: "div" in jQuery validator, for some reason errors are not even mentioned. Changing it back to em, label, or p solves the issue. But if we change our initial element to any of those, it breaks again.

It must be a feature built in to the jQuery validation script, it will not output an error to an element that already exists unless it is created by the validator. How can I get around this?

Here is a fiddle demonstrating the issue, change errorElement: "div" to be of any kind of element and it will work.

http://jsfiddle.net/mDvHh/

Answer 1

Overwrite the errorPlacement instead of errorElement handler, e.g.:

    errorPlacement: function(error, element) {
        element.next(".error").html(error);
    },

Also see your updated jsfiddle.