javascript - 表单重置后，js checkValidity()不再正常运行

IE11问题在这里，可在其他浏览器中使用（如图）。

我有一个带有一组单选按钮的表单。

单选按钮具有required属性

当我加载页面并在窗体上运行checkValidity()函数时，它将返回false。这是对的。

我检查了一个单选按钮。我在窗体上运行checkValidity()函数，它返回true。这是对的。

当我单击重置输入按钮时，它清除了我的单选按钮选择，但是，当我在窗体上运行checkValidity()函数时，它将返回true。这是不正确的。

这违反了HTML规范。 （请参见https://www.w3.org/TR/html52/sec-forms.html#value-sanitization-algorithm）

此行为仅在IE中发生，对此有任何想法吗？

我在下面添加了一个代码片段，并提供了我的问题的示例。

label {
  display: block;
  margin-bottom: 20px;
}

<form id="foo">

  <label><input type="radio" name="xx" value="This" required> This</label>
  <label><input type="radio" name="xx" value="That" required> That</label>
  <label><input type="radio" name="xx" value="other" required> Other  </label>

  <input type="reset" value="Reset Button">
  <input type="button" value="JS Reset Form" onClick="this.form.reset()" />
  <input type="button" value="Is Valid?" onClick="alert(this.form.checkValidity())" />

</form>

最佳答案

IE 10/11仅具有partial support of validity check，并且重置不会触发IE11中的验证（可能是错误）。您必须手动执行：

function resetForm(form) {
 form.reset();
 // re-set any input value, it forces IE to re-validate form
 var input = form.querySelector('input, select');
 input.value = input.value;
}

label {
  display: block;
  margin-bottom: 20px;
}

<form id="foo">

  <label><input type="radio" name="xx" value="This" required> This</label>
  <label><input type="radio" name="xx" value="That" required> That</label>
  <label><input type="radio" name="xx" value="other" required> Other  </label>

  <input type="button" value="JS Reset Form" onClick="resetForm(this.form)" />
  <input type="button" value="Is Valid?" onClick="alert(this.form.checkValidity())" />

</form>