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

Question

此处为 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>

Answer 1

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>