HTML5 'required' leaving invalid pseudo class when form reset

Question

I have a form that uses HTML5 'required' validation, I have found if you try to submit the form in IE, the inputs are highlighted in red with the invalid pseudo class - fine.

If I then complete the form and submit it via AJAX, then issue a form.reset() upon success, the invalid pseudo class is re-applied to the form elements highlighting all the 'required' inputs in red?

How do I reset / clear the form totally including the invalid pseudo class?

Answer 1

I found this to be the ideal solution that appears to be working cross browser.

Simply add the novalidate attribute to the form, reset the form, then remove it - simples!

$('#my_form').attr('novalidate','novalidate');
$('#my_form').get(0).reset();    
$('#my_form').removeAttr('novalidate');

UPDATE : OK, Huston we have a problem....

It has fixed the issue in IE, but now it's causing a problem in Firefox!

Works fine in Chrome and Opera.

Why is FF running the validation checks when the novalidate attribute is removed from the form?

Not ideal but I guess I could always use...

if(/trident/i.test(navigator.userAgent))
{
    $('#my_form').attr('novalidate','novalidate');
    $('#my_form').get(0).reset();
    $('#my_form').removeAttr('novalidate'); 
}
else
{
    $('#my_form').get(0).reset(); 
}

Any other suggestions welcome.