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 ⁨2018年12月⁩.

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

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

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

構文

このイベント名をaddEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

addEventListener("invalid", (event) => {});oninvalid = (event) => {};

<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></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),    }),  );});