title: Conflict between jQuery Validate and Masked Input
body: <p>I've got a form that's using both <a href="http://docs.jquery.com/Plugins/validation" rel="noreferrer">jQuery Validate</a> and <a href="http://digitalbush.com/projects/masked-input-plugin/" rel="noreferrer">Masked Input</a> for phone number and US zip code fields.</p>
  <p>For example, for a US zip code, Masked Input allows only numbers to be entered, and forces either the format &quot;99999&quot; or &quot;99999-9999&quot; (where 9 can be any number). The Validate rule requires the same. But in some cases, Validate marks a field as invalid when it should actually be valid.</p>
  <h2>Code Specifics</h2>
  <p>The regex that jQuery Validate is using on the zip code field is <code>^\d{5}$|^\d{5}\-\d{4}$</code>.</p>
  <p>The mask I'm applying with Masked Input is <code>.mask('99999?-9999')</code></p>
  <h2>Steps to reproduce</h2>
  <p>A conflict between them is produced when I do the following:</p>
  <ul>
  <li>Fill out an invalid zip code (say, three digits)</li>
  <li>Tab away from the field. Masked Input erases the input (expected behavior) and jQuery Validate marks it as invalid because it's blank (also expected).</li>
  <li>Go back to the zip field and fill in a valid <strong>5-digit</strong> zip.</li>
  <li>Tab away from the field. <strong>It is still marked as invalid. This is unexpected</strong>.</li>
  </ul>
  <p>This problem does <strong>not</strong> happen if I fill out a 9-digit zip.</p>
  <h2>Hypothesis</h2>
  <p>I think this error is because in the case of the 5-digit zip, Masked Input has temporarily inserted &quot;-____&quot; to show the user that they can optionally enter a dash and four more digits. This is removed on blur, but before it's removed, the field is validated and fails, since underscores aren't permitted.</p>
  <p>This hypothesis is supported by the fact that, if the form is subsequently re-validated, the zip field will pass. I have done this two ways:</p>
  <ul>
  <li><p>By submitting the form; all fields are re-validated when the submit button is clicked, the zip field passes, and the form submits.</p>
  </li>
  <li><p>By setting up a <code>blur</code> event that re-validates that specific field. For example:</p>
  <p>$(&quot;#zipcode&quot;).blur(function(){ $(this).closest('form').validate().element($(this)); });</p>
  </li>
  </ul>
  <p><strong>This can serve as a hacky solution</strong>, but isn't very satisfactory, because 1) the default settings already re-validate on blur, so this is repetitive, and 2) it requires additional code besides the normal Validate rules.</p>
  <p>Has anybody else run into this issue? <strong>Do you have a more elegant solution</strong> than setting up an additional blur event listener?</p>
  <h2>Update: applying the hacky solution</h2>
  <p>Even applying the hacky solution above doesn't work as nicely as I'd like. For instance, this doesn't work:</p>
  <pre><code>$appDiv.delegate('input,select,textarea','blur',function(){
    $(this).closest('form').validate().element($(this));
  });
  </code></pre>
  <p>...nor does this:</p>
  <pre><code>$('input,select,textarea').live('blur',function(){
    $(this).closest('form').validate().element($(this));
  });
  </code></pre>
  <p>...but this does:</p>
  <pre><code>$('input,select,textarea').each(function(){
    $(this).blur(function(){
      $(this).closest('form').validate().element($(this));
    });
  });
  </code></pre>
  <p>Since these elements are loaded by AJAX, the <code>.each</code> version has to be run each time a form section is loaded.</p>