title: jQuery Validation and Placeholder conflict
body: <p>I'm using the jQuery Validation plugin to validate a form on my site.</p>
  
  <p><a href="http://docs.jquery.com/Plugins/Validation" rel="noreferrer">http://docs.jquery.com/Plugins/Validation</a></p>
  
  <p>I'm also using the following code to provide Placeholder support for browsers that do not support the HTML5 <code>placeholder=""</code> attribute.</p>
  
  <pre><code>// To detect native support for the HTML5 placeholder attribute
  var fakeInput = document.createElement("input"),
      placeHolderSupport = ("placeholder" in fakeInput);
  
  // Applies placeholder attribute behavior in web browsers that don't support it
  if (!placeHolderSupport) {
  
      $('[placeholder]').focus(function() {
          var input = $(this);
          if (input.val() == input.attr('placeholder')) {
              input.val('');
              input.removeClass('placeholder');
          }
      }).blur(function() {
          var input = $(this);
          if (input.val() == '') {
              input.addClass('placeholder');
              input.val(input.attr('placeholder'));
          }
      }).blur().parents('form').submit(function() {
          $(this).find('[placeholder]').each(function() { //line 20
              var input = $(this);
              if (input.val() == input.attr('placeholder')) {
                  input.val('');
              }
          });
      });
  }
  </code></pre>
  
  <p>When I submit my form, the following things happen:</p>
  
  <p>In browsers that support the <code>placeholder</code> attribute, the <code>validate()</code> function fires and everything works like it is supposed to.</p>
  
  <p>In browsers that do not support the <code>placeholder</code> attribute, lines 20-25 clear all the "placeholders" and then the <code>validate()</code> function fires.  If there are no errors, the page submits and everything works like it is supposed to.</p>
  
  <p>In unsupported browsers, in the event that there are errors, the appropriate fields get applied <code>class="error"</code> like usual -- but the placeholder text doesn't come back until the <code>blur()</code> event happens on a particular field.  This leaves those fields blank -- and since there's no labels (just the <code>placeholder</code> attribute) users are left to guess at what each empty field is supposed to contain until the <code>blur()</code> event happens.</p>
  
  <p>The other problem that unsupported browsers have is that since the placeholder fix modifies the <code>value</code> attribute to display the placeholder, fields that are marked as required pass validation when they should be failing.</p>
  
  <p>It seems there's no easy way to use the Validation plugin with the placeholder support code.</p>
  
  <p>I'm looking to either modify the placeholder support code or add a <code>submitHandler: {}</code> function as a parameter to the <code>validate()</code> function to get this working in unsupported browsers.</p>