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

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.