HTMLInputElement: invalid イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
invalid
イベントは、送信可能な要素が制約検証を受け、制約を満たしていない場合に発行されます。
このイベントは、送信時にフォームの問題の概要を表示するのに便利です。フォームが送信されると、 invalid
イベントがそれぞれの妥当ではない状態にあるフォームコントロールで発生します。送信可能な要素が妥当であるかどうかは、その所有者である <form>
を送信する前、または checkValidity()
メソッドがその要素またはその所有者である <form>
に呼び出された後にチェックされます。
blur
ではチェックが行われません。
構文
このイベント名を addEventListener()
等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("invalid", (event) => {});
oninvalid = (event) => {};
イベント型
一般的な Event
です。
例
フォームが無効な値で送信された場合、送信可能な要素がチェックされ、エラーが見つかった場合、無効な要素で invalid
イベントが発生します。この例では、入力に無効な値があったために invalid
イベントが発生した場合、無効な値がログに記録されます。
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
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 # event-invalid |
HTML # handler-oninvalid |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
invalid event |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support