title: jquery validation error multiple fields 1 custom error message
body: <p>I've looked around on Stack to try and find a solution to a problem that I've encountered with my jQuery validation. I've decided to change my error messages, that were below my input fields to a <strong>single</strong> generic all encompassing message placed above the form.
  I have a class <strong>"hide"</strong> on that message <strong>"#error_mail"</strong> that I want to replace with <strong>"error"</strong> when there is an error in the field(s) on submission/validation. 
  Any help would be greatly appreciated, thanks in advance.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form action="#" method="post" class="new_web_user" id="new_web_user" autocomplete="off"&gt;
              &lt;p class="fields-required"&gt;
              *Required fields&lt;/p&gt;
              &lt;p id="error_mail" class="hide"&gt;We&amp;#39;re sorry, the fields highlighted in red are required&lt;/p&gt;
              &lt;div class="field-column"&gt; etc etc.....
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(function(){jQuery.validator.setDefaults({
               errorContainer: "#error_mail",
               errorPlacement: function(error, element) {
               error.appendTo('#error_mail');
        },
               ignore: ':hidden:not([class~=selectized]),:hidden &gt; .selectized, .selectize-control .selectize-input input'
        });
  
      $('#new_web_user').validate({
                rules: {
                    web_user_title: {required: true},
                    web_user_given_name: {
                      required: true
                   },
                    web_user_family_name: {
                      required: true
                   },                  
                    web_user_email: { 
                      required:   true,
                      email:      true
                   },
                   email_confirmation: {
                      required:   true,
                        equalTo: '#web_user_email'
                   },
                   web_user_country: {
                      required:   false,
                   },
                },
                messages : {
                   web_user_title:     {
                          required: "Please select a title."
                   },
                   web_user_given_name:    {
                          required: "Firstname is required."
                   },
                   web_user_family_name:   {
                          required: "Lastname is required."
                   },
                   web_user_email:     {
                          required: "Email address is required.",
                          email: "Email address seems invalid."
                   },
                   email_confirmation:     {
                          required: "Email address is required.",
                          equalTo: "Email addresses do not match."
                   },
                   web_user_country:   {
                          required: "Please choose your country."
                   }
               },
               submitHandler:  function(form) {
                  $.ajax({
  </code></pre>