После сброса формы 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

Основываясь на ответе bigless, я думаю, что вы могли бы создать функцию проверки JavaScript для проверки формы, таким образом, вы могли бы использовать кнопку сброса типа и "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>

Answer 2

IE 10/11 имеет только частичную поддержку проверки достоверности , а сброс не запускает проверку в 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>