HTMLInputElement: invalid イベント

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

バブリング なし
キャンセル
インターフェイス Event
イベントハンドラープロパティ GlobalEventHandlers.oninvalid

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

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

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

HTML

<form action="#">
  <ul>
    <li><label>Enter an integer between 1 and 10: <input type="number" min="1" max="10" required></label></li>
    <li><input type="submit" value="submit"></li>
  </ul>
</form><p id="log"></p>

JavaScript

const input = document.querySelector('input')
const log = document.getElementById('log')

input.addEventListener('invalid', logValue)

function logValue(e) {
  log.textContent += e.target.value
}

結果

仕様書

仕様書 状態 備考
HTML Living Standard
Invalid event の定義
現行の標準
HTML 5.1
Invalid event の定義
勧告
HTML5
Invalid event の定義
勧告

ブラウザーの互換性

BCD tables only load in the browser

関連情報