title: Display both summary and individual error messages using the jQuery validation plugin
body: <p>How can I display both individual error messages and summary for the jQuery plugin?</p>
  
  <p>I actually found <a href="https://stackoverflow.com/questions/2520119/display-both-jquery-validation-summary-and-individual-error-messages">a similar question </a>, but it just references some hooks I can use, but I'm not sure where to start.</p>
  
  <p>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 <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>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".</p>
  
  <p>Code below:</p>
  
  <pre><code>$(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;
          }
      });
  });
  </code></pre>