HTMLInputElement: invalid イベント

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

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

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

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

例

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

HTML

<form action="#">
  <ul>
    <li><label>1 から 10 までの整数を入力してください: <input type="number" min="1" max="10" required></label></li>
    <li><input type="submit" value="送信"></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
}

結果

仕様書

Specification
HTML Standard
# event-invalid

ブラウザーの互換性

BCD tables only load in the browser

関連情報