HTMLInputElement: invalid イベント

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

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

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

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 の定義
勧告

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
invalid eventChrome 完全対応 10Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 10Safari 完全対応 5WebView Android 完全対応 4Chrome Android 完全対応 18Firefox Android 完全対応 64Opera Android 完全対応 12Safari iOS 完全対応 5Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応

関連情報