0

デフォルト フォームのリセット後、 Internet Explorer が検証状態 (.checkValidity()との両方) をリセットしていないように見えます。validity.validこれは、Chrome と Edge で期待どおりに機能します。

誰かがこの問題とそれを回避する方法についての洞察を持っていますか?おそらくIEで検証状態を手動でリセットする方法はありますか?

この問題について言及しているドキュメントは見たことがありません。caniuse は、IE10 および IE11 での HTML5 検証のサポートが限定的であると主張していますが、このプロパティについて具体的に言及していません。

次の例を参照してください - 予想される動作:

  • ラジオ ボタンがチェックされていません。クリック送信 = 無効な入力 (デフォルトの HTML5 コントロールのため、無効なフォームはトリガーされません - ハンドラーに到達することはなく、問題ありません)
  • 1 つのラジオ ボタンがオンになっています。送信をクリック = 有効な入力、有効なフォーム
  • クリックリセット = 無効な入力、無効なフォーム
    • これが IE の逸脱点です。IE は、入力が空白であっても、フォームと入力がまだ有効であることを保持します。

(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>

スニペットに見られるように、入力の変更をトリガーし、それをイベントスタックにプッシュして、入力に変更を適用した後にアクセスするなど、いくつかのことを試しましたが、まだうまくいきません。

他の場所でバグやこれについての言及は見つかりませんでした

4

0 に答える 0