title: How to suppress jquery validate on cancel?
body: <p>I'm using the jquery validate plugin for form validation.  I'm seeing something weird with the cancel functionality.  I have a form with one email field, a submit button, and a cancel button.  When I type an incomplete address in the email field, and then, without clicking anywhere else on the page, click cancel, the validator checks the email field, displays the invalid message next to the field, and kills the cancel action.</p>
  
  <p>I found a related question here: <a href="https://stackoverflow.com/questions/203844/jquery-validation-plugin-disable-validation-for-specified-submit-buttons">jQuery Validation plugin: disable validation for specified submit buttons</a>.  It looks exactly like what I need.  However it doesn't work!  I added the "cancel" css class to my cancel button, but it had NO effect.</p>
  
  <p>This sample code demonstrates the problem I'm seeing.  I'm seeing the behavior in both FF and Chrome.</p>
  
  <p>In this sample, when I type an invalid email address in the text input, and then click the cancel button before clicking anything else, the validator displays a message next to the text input and the cancel action never occurs.  If I then click cancel again, the page reloads as expected.  This means that to get the page to cancel, I effectively have to click cancel twice.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $("#myForm").validate()
  
          $(".cancel").click(function () {
              location.reload(true)
          })
  
      })
  &lt;/script&gt;
  
  &lt;div&gt;
      &lt;form name="myForm" id="myForm" action="index.html"&gt;
          &lt;input type="text" class="required email" id="myField" name="myField"/&gt;
          &lt;input type="submit" value="Submit"/&gt;
          &lt;input type="submit" value="Cancel" class="cancel"/&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Also interesting: I tried running the demo found in the jquery validate documentation (<a href="http://docs.jquery.com/Plugins/Validation/Reference#Skipping_validation_on_submit" rel="nofollow noreferrer">http://docs.jquery.com/Plugins/Validation/Reference#Skipping_validation_on_submit</a>).  When I run the demo, I can't tell if validation is working--the email field is never marked invalid, even when I enter gobbledygook and click the submit button.  All I ever get is a simple alert that's been added to the form's submitHandler.  And the cancel button behaves the same way, so I can't tell if adding the cancel class works at all.</p>
  
  <p>I'm running this with both FF and Chrome.  I'm using jquery 1.9.1 and jquery-validate 1.11.4.</p>