placeholder issue with jQuery Validate

Question

I noticed today that we have an issue with jquery Validate when used in conjunction with placeholder text.

Example:

&         


        
      

Answer 1

You could script around it perhaps.

This will remove placeholder attribute on submit, and restore them in the event of an error.

var placeholders = {};
$('form').validate({
   submitHandler: function(form) {

       $(form).find(':input[placeholder]').each(function() {
          var placeholder = $(this).attr('placeholder'); 
          placeholders[placeholder] = this;
          $(this).removeAttr('placeholder');
       });       

       form.submit();
   },

   invalidHandler: function() {

      $.each(placeholders, function(placeholder, element) {
          $(element).attr('placeholder', placeholder);
      });

   }

});