表单重置后，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只有部分支持有效性检查，重置不会在IE11中触发验证(可能是bug)。你必须手动完成：

​

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>

​

Answer 2

基于bigless的答复，我认为您可以创建一个JavaScript验证函数来验证表单，因此，您可以使用reset type按钮和"this.form.reset()"，代码如下：

<style type="text/css">
    label {
        display: block;
        margin-bottom: 20px;
    }
</style>

<script type="text/javascript">
    function validityForm(form) {
        var input = form.querySelector('input, select');
        input.value = input.value;
        alert(form.checkValidity());
    }
</script>
<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="validityForm(this.form)" />
</form>