HTMLInputElement: invalid イベント
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),
}),
);
});
結果
仕様書
Specification |
---|
HTML Standard # event-invalid |
HTML Standard # handler-oninvalid |
ブラウザーの互換性
BCD tables only load in the browser