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

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;
        }
    });
});

Answers


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.


Need Your Help

In Django, How do you write the url pattern for '/' and other root-based urls

django url routing url-pattern

I'm new to django, and one of the things that I'm still learning is url_patterns. I set up a pages app to handle the root path (http://www.mysite.com) as well as some static pages such as the about...

How to get a specific output iterating a hash in Ruby?

ruby hash output

I want to get a specific output iterating a Ruby Hash.