jQuery Validation: How to not display errors? OR How to display errors as a tooltip?

Question

I want my errors to float above, left-justified, the input field that doesn't validate. How can I do this?

If I can't, how can I turn the errors off? I still want the fields to validate (and highlight on error), but not for the actual error messages to display. I couldn't seem to find anything in the jQuery docs that would let me turn them on/off... ??

Answer 1

You want the errorPlacement option, and perhaps errorContainer and errorElement for further customization.

See http://docs.jquery.com/Plugins/Validation/validate#toptions

Answer 2

What is the code you are working with? It sounds like you have all the guts there and you just need the styling to make it display your errors on validation?

Let me know.

Ryan

Answer 3

Use the errorPlacement property for your jQuery validation call, as J Cooper suggested:

$(...).validate({
    errorPlacement: function(error, element) {
        error.insertBefore(element);
    }
});

And CSS to style the error (in your stylesheet, or to the individual elements):

label.error {
    /* Move the error above the input element. */
    position: absolute;
    line-height: 1.5em;
    margin-top: -1.5em;

    background-color: red;
    color: white;
    padding: 0 2px;
}