title: jquery validate errors in modal, triggering modal more than once
body: <p>I am displaying the (<a href="http://jqueryvalidation.org/" rel="nofollow noreferrer">http://jqueryvalidation.org/</a>) errors in a modal.</p>
  
  <p>When the user does not fill in the email and code fields, it displays a modal with an error message saying they need to fill out those two fields, I click close, then it displays another modal, but it only displays one error. Two things that are going wrong, it should not display the modal after I click close in the modal, 2nd thing: it is only displaying the last error message when the second modal shows up (after clicking the close button in the first modal).</p>
  
  <p>Screenshots provided to show you what I am talking about</p>
  
  <p><img src="https://i.stack.imgur.com/PFEqz.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/VihkK.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/q8Wk6.png" alt="enter image description here"></p>
  
  <p>I did a count++ and printed that out in the console and it is triggering showErrors method more than once. Am I using the wrong method? I used showErrors because I could append the errors to the message variable and then display them in the modal.</p>
  
  <pre><code>$("#enter-code-form").validate({
      //ignore: [],
      rules: {
          email: {
              required: true,
              email: true,
          },
          code: {
              required: true,
              minlength: 8,
              maxlength: 8,
          },
      },
  
      messages: {
          code: {
              required: "Please provide a valid code",
              minlength: "You need to provide a eight alpha-numeric code",
              maxlength: "You need to provide a eight alpha-numeric code",
          },
          email: {
              required: "Please provide email",
              email: "Your email address must be in the format of name@domain.com"
          }
      },
  
      showErrors: function(errorMap, errorList) {
          var message = '';
          var element = '';
  
          $.each(errorList, function (index, error) {
              message += '&lt;p&gt;' + error.message + '&lt;/p&gt;';       
              element += error.element;        
          });
  
          display_modal('You have an error', message);
          console.log(message);
          // console.log(element);
      }
  });
  
  function display_modal(title, message)
  {
      $("#error-modal").modal("show");
      $('.modal-title').show().html(title);
      $('.modal-body-message').show().html(message);
  }
  </code></pre>