How to manually reset the input validation state in IE after form reset?

Question

It appears as though Internet Explorer does not reset the validation state (both .checkValidity() and validity.valid) after a default form reset. This does work as expected in Chrome and Edge.

Does anyone have any insight into this issue, and how to get around it - perhaps how to reset the validation state in IE manually?

I have not seen any documentation referencing this issue - caniuse claims limited support for HTML5 validation in IE10 and IE11, but does not reference this property specifically.

---

See the following example - the expected behavior:

• No radio buttons checked; click submit = input invalid (form invalid does not trigger because of default HTML5 controls - it never gets to the handler, and that is ok)
• 1 radio button checked; click submit = valid input, valid form
• Click reset = invalid input, invalid form
  • This is where IE deviates - it retains that the form and input are still valid, even though the input is blank.

(function() {
  $("form")
    .on("submit", function(e) {
      var v = formValidCheck();
      if (!v) {
        e.preventDefault();
      }

      radioValidCheck(false);

      return false; // don't go anywhere
    })
    .on("reset", function(e) {
      // Push onto event stack, so it refreshes after the form fields have been reset
      setTimeout(function() {
        $('input').change();
        formValidCheck();
        radioValidCheck(false);
      }, 0);
    });

  $('input').on('invalid', function(e) {
    e.preventDefault();
    radioValidCheck(true);
  });
  $('input').on('change', function(e) {
    formValidCheck();
    radioValidCheck(false);
  });

  function formValidCheck() {
    var v = $('form').get(0).checkValidity();
    $("#test").text(v);

    return v;
  }

  function radioValidCheck(clearFormValid) {
    if (clearFormValid) {
      $('#test').text('');
    }
    $("#testradio").text($("#radio1").get(0).validity.valid);
  }
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Form is valid? <span id="test"></span></p>
<p>Radio is valid? <span id="testradio"></span></p>

<form>
  <input type="radio" required id="radio1" name="testradios">
  <label for="radio1">1</label>

  <input type="radio" required id="radio2" name="testradios">
  <label for="radio2">2</label>

  <input type="radio" required id="radio3" name="testradios">
  <label for="radio3">3</label>

  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

I have tried a couple things, like triggering a change on the input, and pushing it onto the event stack so it accesses it after it has applied the changes to the input, as seen in the snippet, but still no luck.

I haven't found a bug or any mention of this elsewhere