title: invalidHandler fires multiple times
body: <p>I'm using jQuery Validator plug-in to validate a simple Contact Request form. The requirements are:</p>
  
  <ol>
  <li>Validation occurs on form submission as well as onfocusout.</li>
  <li>Text messages are placed in the title of the field for hover. This part is omitted here because it's not part of the problem.</li>
  <li>Upon form submission if any errors are found, a dialog box appears stating the number of errors found with instructions to return to the form.</li>
  </ol>
  
  <p>The problem I am running into is with the invalidHandler event of the validate. If I load the form and then click Submit I get the dialog as expected. It is when I set a breakpoint or a simple alert within the function that I learn that it fires 3 times.</p>
  
  <p>Additionally I was under the impression the invalidHandler event only fires upon form submission. If I enter a field and then leave it blank, the onfocusout fires as expected but then the invalidHander fires again, bringing up the dialog. I removed the onfocusout event from the validate, but it still fires every time.</p>
  
  <p>Side note: on the extra calls to the event, as well as the unexpected ones, the formatting in the dialog is way off, the entire interior script is about 10px wide.</p>
  
  <p>I've searched and tried about all I can think of. The code is below, any ideas where I am tripping up? Thanks in advance!</p>
  
  <p>HTML</p>
  
  <pre><code>                &lt;form id="kontaktform" name="kontaktform" method="post" action=""&gt;
                      &lt;p&gt;
                          &lt;input type="radio" name="rblType" id="rb_0 tabindex="1" value="1" /&gt; Item 1&lt;br /&gt;
                          &lt;input type="radio" name="rblType" id="rb_1 tabindex="2" value="2" /&gt; Item 2&lt;br /&gt;
                          &lt;input type="radio" name="rblType" id="rb_2 tabindex="3" value="3"/&gt; Item 3&lt;br /&gt;                       &lt;/p&gt;
                      &lt;fieldset id="fs_pers"&gt;
                          &lt;legend&gt;Pers&amp;#246;nliche Informationen&lt;/legend&gt;
                          &lt;div&gt;
                              &lt;label for="txtVorname"&gt;Vor-/Nachname:&lt;/label&gt;
                              &lt;select name="ddlSal" id="ddl_sal"&gt;
                                  &lt;option value="1"&gt;Herr&lt;/option&gt;
                                  &lt;option value="2"&gt;Frau&lt;/option&gt;
                              &lt;/select&gt;&amp;nbsp;
                              &lt;input type="text" name="txtFName" id="txtFName" maxlength="50" tabindex="6" /&gt;&amp;nbsp;
                              &lt;input type="text" name="txtLName" id="txtLName" maxlength="50" tabindex="7" /&gt;&lt;span class="req"&gt;*&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;label for="txtFirma" id="lbl_firma" class="lblDisabled"&gt;Firma&lt;/label&gt;
                              &lt;input type="text" name="txtFirm" id="txtFirm" maxlength="50" tabindex="8" style="width: 450px;" class="txtDisabled disabled="disabled" /&gt;&lt;span id="req_firm" class="req hide"&gt;*&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;label for="txtAdresse"&gt;Adresse:&lt;/label&gt;
                              &lt;input type="text" name="txtAddr" id="txtAddr" maxlength="100" tabindex="9" style="width: 450px;" /&gt;&lt;span class="req"&gt;*&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;label for="txtPLZ"&gt;PLZ/Ort:&lt;/label&gt;
                              &lt;input type="text" name="txtPostal" id="txtPostal" class="plz" maxlength="10" tabindex="10" style="width: 60px" /&gt;&amp;nbsp;
                              &lt;input type="text" name="txtCity" id="txtCity" maxlength="50" tabindex="11" style="width: 380px;" /&gt;&lt;span class="req"&gt;*&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;label for="txtTele"&gt;Telefon:&lt;/label&gt;
                              &lt;input type="text" name="txtTele" id="txtTele" maxlength="50" tabindex="12" class="contactinfo defaultText" style="width: 450px;" /&gt;&lt;span class="req"&gt;*&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;label for="txtEmail"&gt;E-Mail:&lt;/label&gt;
                              &lt;input type="text" name="txtEmail" id="txtEmail" maxlength="75" tabindex="13" class="contactinfo defaultText" style="width: 450px;" /&gt;&lt;span class="req"&gt;*&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/fieldset&gt;
                      &lt;fieldset id="fs_question"&gt;
                          &lt;legend&gt;Nachrichten&lt;span class="req"&gt;*&lt;/span&gt;&lt;/legend&gt;
                          &lt;div&gt;
                              &lt;textarea name="txtComments" id="txtComments" tabindex="14&gt;&lt;/textarea&gt;
                          &lt;/div&gt;
                      &lt;/fieldset&gt;
                      &lt;div class="buttonDiv"&gt;
                          &lt;input type="submit" name="btnSubmit" tabindex="16" id="btnSubmit" value="Senden..." /&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
                  &lt;div id="diverror" style="display: none" title="Fehler Gefunden"&gt;
                      &lt;p id="divmsg"&gt;&lt;/p&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the specific validation jQuery info:</p>
  
  <pre><code>var rqTxt = {
      required: true,
      minlength: 1
  }
  $('#kontaktform').validate({
      debug: true,
      onfocusout: function (element) {
          $(element).valid();
      },
      errorPlacement: function (error, element) {
          return true;
      },
      errorClass: 'error',
      rules: {
          txtFName: rqTxt,
          txtLName: rqTxt,
          txtComments: {
              required: true,
              minlength: 10,
              maxlength: 1000
          },
          txtTele: {
              require_from_group: [1, ".contactinfo"]
          },
          txtEmail: {
              email: true,
              require_from_group: [1, ".contactinfo"]
          }
      },
      invalidHandler: function (form, validator) {
          var errors = validator.numberOfInvalids();
          if (errors) {
              $('#divmsg').html('Sie haben {0} Fehler in Ihrer Kontaktanfrage. Bitte &amp;#252;berpr&amp;#252;fen Sie die Formulare und versuchen Sie, Ihre Anfrage erneut zu senden.'.replace('{0}', errors));
              $('#diverror').dialog({
                  dialogClass: 'diverror',
                  modal: true,
                  buttons: [{
                      text: "Schließen",
                      "class": "btnClass",
                      click: function () {
                          $(this).dialog("close");
                      }
                  }]
              });
              $('#diverror').dialog('option', 'title', errors + ' Fehler Gefunden');
          }
      },
      submitHandler: function (form) {
          if ($(form).valid() &amp;&amp; confirm('Sind Sie sicher?')) {
              form.submit();
              return false;
          }
      }
  
  });
  </code></pre>
  
  <p>(Moving my "answer" to an actual answer for this question as my 24 hour wait period is up.)</p>