From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/htmlinputelement/invalid_event/index.html | 112 +++++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 files/ja/web/api/htmlinputelement/invalid_event/index.html (limited to 'files/ja/web/api/htmlinputelement/invalid_event/index.html') diff --git a/files/ja/web/api/htmlinputelement/invalid_event/index.html b/files/ja/web/api/htmlinputelement/invalid_event/index.html new file mode 100644 index 0000000000..c0e7d95f60 --- /dev/null +++ b/files/ja/web/api/htmlinputelement/invalid_event/index.html @@ -0,0 +1,112 @@ +--- +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")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf