HTML5 & # 39;需要# 39;表单重置时留下无效的伪类

HTML5 'required' leaving invalid pseudo class when form reset

本文关键字:无效 需要 表单 HTML5      更新时间:2023-09-26

我有一个使用HTML5 'required'验证的表单,我发现如果您尝试在IE中提交表单,输入将以红色突出显示无效的伪类-好的。

如果我完成表单并通过AJAX提交它,然后在成功后发出form.reset(),无效的伪类将被重新应用于表单元素,并以红色突出显示所有"必需的"输入。

我如何重置/清除表单完全包括无效的伪类?

我发现这似乎是跨浏览器工作的理想解决方案。

只需添加novalidate属性到表单,重置表单,然后删除它-简单!

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

更新:好的,休斯顿我们有问题....

它已经修复了IE中的问题,但现在它在Firefox中引起了一个问题!

在Chrome和Opera中可以正常工作。

当novalidate属性从表单中删除时,为什么FF运行验证检查?

不理想,但我想我总是可以使用…

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

欢迎有其他建议

您可以将整个表单标签存储到javascript变量中,然后在提交或reset()时间后恢复到父元素,这将创建新的表单&替换旧格式,如..

//store after page load to reset when require-
var oldfrmcode=jQuery('.formcontainer').html();
//place following code to reset form require place
jQuery('.formcontainer').html(oldfrmcode);