Question

I’m trying to validate a form using jquery validate plugin and I’m having a hard time finding out if I can override the default validation method for displaying error messages. The default action seems to be to display the error message pertaining to a form field immediately after the invalid field.

Instead of doing that I would just like to highlight the fields with errors and display the list of errors at the top of the form. I found something similar to this in the docs for the validate plugin by using the invalidHandler but this doesn’t disable displaying the error messages next to the invalid fields nor does it allow me to capture the error messages and put them at the top of the form.

$("#myform").validate({
    debug: true,
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var message = errors == 1
                ? 'You missed 1 field. It has been highlighted'
                : 'You missed ' + errors + ' fields. They have been highlighted';
            $("div#errorMessage span").html(message);
            $("div#errorMessage").show();
        } else {
            $("div#errorMessage").hide();
        }
    },
    rules: {
        name: (required: true}
    },
    messages: {
        name: "You must give your name"
    }
});

Thanks in advance for the help.

Answer 1

Jquery Validate has many options for customizing how the errors messages are displayed. you can see all the options here

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

errorLabelContainer displays the error messages in an element you define rather than next to the field.

$("#myform").validate({
    debug: true,
    errorLabelContainer: "div#errorMessage",
    wrapper: "li", 
    rules: {
        name: (required: true}
    },
    messages: {
        name: "You must give your name"
    }
});

the wrapper option allows you to wrap the messages in an element, in this case an li.

You can use highlight and unhighlight to manage how the elements that contain the error are formatted.