--- title: 'HTMLInputElement: invalid イベント' slug: Web/API/HTMLInputElement/invalid_event tags: - API - Constraint Validation API - Constraint validation - Event - Forms - Reference - invalid translation_of: Web/API/HTMLInputElement/invalid_event ---

{{APIRef}}

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

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

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

{{domxref("Element/blur_event", "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
}

結果

{{EmbedLiveSample("Examples")}}

仕様書

仕様書 状態 備考
{{ SpecName('HTML WHATWG', 'forms.html#the-constraint-validation-api', 'Invalid event') }} {{Spec2('HTML WHATWG')}}
{{ SpecName('HTML5.1', 'sec-forms.html#the-constraint-validation-api', 'Invalid event') }} {{Spec2('HTML5.1')}}
{{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'Invalid event') }} {{Spec2('HTML5 W3C')}}

ブラウザーの互換性

{{Compat("api.HTMLInputElement.invalid_event")}}

関連情報