From 4c51ebb20f086caba8dbdea3077eac3122ec144f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 5 Feb 2022 10:31:25 +0900 Subject: HTMLInputElement のイベントの記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/htmlinputelement/invalid_event/index.html | 110 --------------------- .../api/htmlinputelement/invalid_event/index.md | 110 +++++++++++++++++++++ 2 files changed, 110 insertions(+), 110 deletions(-) delete mode 100644 files/ja/web/api/htmlinputelement/invalid_event/index.html create mode 100644 files/ja/web/api/htmlinputelement/invalid_event/index.md (limited to 'files') diff --git a/files/ja/web/api/htmlinputelement/invalid_event/index.html b/files/ja/web/api/htmlinputelement/invalid_event/index.html deleted file mode 100644 index 64368ff059..0000000000 --- a/files/ja/web/api/htmlinputelement/invalid_event/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -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")}}

- -

関連情報

- - diff --git a/files/ja/web/api/htmlinputelement/invalid_event/index.md b/files/ja/web/api/htmlinputelement/invalid_event/index.md new file mode 100644 index 0000000000..64368ff059 --- /dev/null +++ b/files/ja/web/api/htmlinputelement/invalid_event/index.md @@ -0,0 +1,110 @@ +--- +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