From 7ba3a23b4ea4ff5ab3c1196ce9ef5f24ef23fd45 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 6 Feb 2022 16:24:08 +0900 Subject: 2021/09/15 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/htmlinputelement/invalid_event/index.md | 138 +++++++++------------ 1 file changed, 58 insertions(+), 80 deletions(-) diff --git a/files/ja/web/api/htmlinputelement/invalid_event/index.md b/files/ja/web/api/htmlinputelement/invalid_event/index.md index 64368ff059..a1a7fcd3c5 100644 --- a/files/ja/web/api/htmlinputelement/invalid_event/index.md +++ b/files/ja/web/api/htmlinputelement/invalid_event/index.md @@ -3,108 +3,86 @@ title: 'HTMLInputElement: invalid イベント' slug: Web/API/HTMLInputElement/invalid_event tags: - API - - Constraint Validation API - - Constraint validation - - Event - - Forms - - Reference + - 制約検証 API + - 制約検証 + - イベント + - フォーム + - リファレンス - invalid +browser-compat: api.HTMLInputElement.invalid_event translation_of: Web/API/HTMLInputElement/invalid_event --- -

{{APIRef}}

+{{APIRef}} -

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

+**`invalid`** イベントは、送信可能な要素が制約の検証を受け、制約を満たしていない場合に発行されます。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可
インターフェイス{{DOMxRef("Event")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.oninvalid")}}
バブリングなし
キャンセル可
インターフェイス{{DOMxRef("Event")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.oninvalid")}}
-

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

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

{{domxref("Element/blur_event", "blur")}} ではチェックが行われません。

+{{domxref("Element/blur_event", "blur")}} ではチェックが行われません。 -

例

+## 例< -

フォームが無効な値で送信された場合、送信可能な要素がチェックされ、エラーが見つかった場合、無効な要素で invalid イベントが発生します。この例では、入力に無効な値があったために invalid イベントが発生した場合、無効な値がログに記録されます。

+フォームが無効な値で送信された場合、送信可能な要素がチェックされ、エラーが見つかった場合、無効な要素で `invalid` イベントが発生します。この例では、入力に無効な値があったために `invalid` イベントが発生した場合、無効な値がログに記録されます。 -

HTML

+### 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>
+```html + + +

+``` -

JavaScript

+### JavaScript -
const input = document.querySelector('input')
+```js
+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')}}
+} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- HTML の {{HtmlElement("form")}} element +- 関連イベント: {{domxref("HTMLFormElement/submit_event", "submit")}} +- CSS の {{cssxref(":invalid")}} 擬似クラス -- cgit v1.2.3-54-g00ecf