1. ウェブ
  2. Web API
  3. HTMLInputElement
  4. invalid

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

HTMLInputElement: invalid イベント

Baseline
広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2018年12月以降、すべてのブラウザーで利用可能です。

invalid イベントは、送信可能な要素が制約検証を受け、制約を満たしていない場合に発行されます。

このイベントは、送信時にフォームの問題の概要を表示するのに便利です。フォームが送信されると、 invalid イベントがそれぞれの妥当ではない状態にあるフォームコントロールで発生します。送信可能な要素が妥当であるかどうかは、その所有者である <form> を送信する前、または checkValidity() メソッドがその要素またはその所有者である <form> に呼び出された後にチェックされます。

blur ではチェックが行われません。

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("invalid", (event) => {});

oninvalid = (event) => {};

イベント型

一般的な Event です。

例

フォームが無効な値で送信された場合、送信可能な要素がチェックされ、エラーが見つかった場合、無効な要素で invalid イベントが発生します。この例では、入力に無効な値があったために invalid イベントが発生した場合、無効な値がログに記録されます。

HTML

html
<form action="#">
  <div>
    <label>
      1 から 10 までの整数を入力してください:
      <input type="number" min="1" max="10" required />
    </label>
  </div>
  <div><input type="submit" value="送信" /></div>
</form>
<hr />
Invalid values:
<ul id="log"></ul>

JavaScript

js
const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("invalid", (e) => {
  log.appendChild(
    Object.assign(document.createElement("li"), {
      textContent: JSON.stringify(e.target.value),
    }),
  );
});

結果

仕様書

仕様書
HTML
# event-invalid
HTML
# handler-oninvalid

ブラウザーの互換性

関連情報

  • HTML の <form> element
  • 関連イベント: submit
  • CSS の :invalid 擬似クラス

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告