HTML5的'required'在表单重置时留下无效的伪类

Question

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

如果我完成表单并通过AJAX提交它，然后在成功时发出form.reset（），则将重新应用无效的伪类到表单元素，将所有'required'输入突出显示为红色？

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

- 1DMF

---

我建议只需克隆元素并用克隆替换它们。 - adeneo

这对我来说听起来很不好...也许我没有理解你的意思...但是，我已经找到了我的解决方案并发布了它。 - 1DMF

我猜你的意思是循环整个表单克隆每个“必填”元素，将克隆的元素添加到DOM中，然后删除旧元素。这不是“杀鸡焉用牛刀”的做法吗？ - 1DMF

Answer 1

我发现这是一个看起来可以跨浏览器工作的理想解决方案。

只需将novalidate属性添加到表单中，重置表单，然后删除它-简单易行！

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

更新：好的，休斯顿，我们有问题了...

它已经修复了IE中的问题，但现在在Firefox中引起了问题！

在Chrome和Opera中运行良好。

为什么FF会在从表单中删除novalidate属性时运行验证检查？

不是理想的解决方案，但我想我总能使用...

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

任何其他建议欢迎。

- 1DMF

Answer 2

您可以将整个表单标签存储到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);

- bharat