title: Show alert once and highlight fields
body: <p>I'm using the JQuery-validate plugin to validate a form. So far I have the fields highlighted whenever an error is present. I want an alert to show indicating that there are errors that need to be corrected but I'm not sure where to add the alert. Wherever I add it to my existing code, it shows multiple times.</p>
  
  <pre><code>$(function() {
  
      $("form[id='changeAccountSettings']").validate({
  
        onclick: false,
        onkeyup: false,
        errorPlacement: function(error, element) {
  
          var n = element.attr("name");
  
          if (n == "first_name")
              element.attr("placeholder", "Please provide a first name");
          else if (n == "last_name")
              element.attr("placeholder", "Please provide a last name");  
          else if (n == "email")
        element.attr("placeholder", "Valid email address");
        else if (n == "cellphone")
              element.attr("placeholder", "Valid cellphone number");
  
      },
      rules: {
          first_name: {
              minlength: 2,
              required: true
          },
          last_name: {
              minlength: 2,
              required: true
          },
          email: {
              minlength: 6,
              required: true,
              email: true
          },
          cellphone: {
            minlength: 10,
            required: true,
            number: true
        },
  
      },
      highlight: function(element) {
  
          $(element).addClass('has_error');
  
      },
      unhighlight: function(element) {
  
          $(element).removeClass('has_error');
      },
      submitHandler: function(form) {
          form.submit();
  
      }
  
  });
    });
  </code></pre>