Display both summary and individual error messages using the jQuery validation plugin

Question

How can I display both individual error messages and summary for the jQuery plugin?

I actually found a similar question , but it just references some hooks I can use, but I'm not sure where to start.

I got the displaying individual error messages part, but I need to display the summary in an alert box on submit, and plugin can be found here.

Just found out how, thanks for David's code, and on my follow-up question - The alert box would be "First Name: Please enter a valid First Name".

Code below:

$(document).ready(function() {
    var submitted = false;
    ('.selector').validate({
        showErrors: function(errorMap, errorList) {
            if (submitted) {
                var summary = "You have the following errors: \n";
                $.each(errorMap, function(key, value) {
               summary += key + ': ' + value + "\n";
                });
                alert(summary);
                submitted = false;
            }
            this.defaultShowErrors();
        },
        invalidHandler: function(form, validator) {
            submitted = true;
        }
    });
});

Answer 1

As the linked question says, the showErrors callback is called whenever errors are shown. You can use this to create your summary and alert it. You can then call this.defaultShowErrors() to display the normal individual error messages.

By default showErrors is called for a lot of events (submit, keyup, blur, etc). You could either disable those, or use the invalidHandler method which is only called when an invalid form is submitted.

Example:

$(document).ready(function() {
    var submitted = false;
    ('.selector').validate({
        showErrors: function(errorMap, errorList) {
            if (submitted) {
                var summary = "You have the following errors: \n";
                $.each(errorList, function() { summary += " * " + this.message + "\n"; });
                alert(summary);
                submitted = false;
            }
            this.defaultShowErrors();
        },          
        invalidHandler: function(form, validator) {
            submitted = true;
        }
    });
});

See here for a complete list of options that can be passed to the validate method.