title: jQuery validation .showErrors in div instead of alert
body: <p>I am looking for a way to use the jQuery validator.showErrors method to display a general error message above my form whenever there are any errors while at the same time displaying individual error messages by each field. I currently have the following code, but would like to change the alert to instead show a div or something similar. Any help is greatly appreciated.</p>
  
  <pre><code>$(document).ready(function() {
  $('#signin').validate({
      rules: {
          email: {
              required: true,
              email: true
          },
          password:   {
              required: true,
              rangelength:[8,16]
          }
      },  //end rules
      messages: {
          email: {
              required: 'Required field',
              email: 'This is not a valid email address'
          },
          password: {
              required: 'Please type a password',
              rangelength: 'Password must be between 8 and 16 characters long.'
          }
      },//end messages
      errorPlacement: function(error, element) {
          if( element.is(':radio') || element.is(':checkbox')) {
              error.appendTo(element.parent());
          } else {
              error.insertAfter(element);
          }
      },//end errorPlacement
      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;
      }
  });//end validate
  }); // end ready
  </code></pre>