IE8 removing placeholder text after validation fail

Question

Having a similar issue to this question

In all browsers the placeholder text is fine after a validation fail on my form but it disappears in IE8. Initially IE8 wasn't showing the placeholders so I used this fix to fill the placeholders

$('[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.val() == input.attr('placeholder')) {   
            input.addClass('placeholder');  
            input.val(input.attr('placeholder'));   
        }  
    })
    .blur();   

$('[placeholder]').parents('form').submit(function () {    
    $(this).find('[placeholder]').each(function () {   
        var input = $(this);   
        if (input.val() == input.attr('placeholder')) {   
            input.val('');   
        }  
    })   
});

Should I be using a different placeholder fix/polyfill in the first place? or is there a way to fix this?

Answer 1

    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();


 },



enter code here

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

}

});