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/globaleventhandlers/oninvalid/index.html | 98 ++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 files/ja/web/api/globaleventhandlers/oninvalid/index.html (limited to 'files/ja/web/api/globaleventhandlers/oninvalid') diff --git a/files/ja/web/api/globaleventhandlers/oninvalid/index.html b/files/ja/web/api/globaleventhandlers/oninvalid/index.html new file mode 100644 index 0000000000..8b16664837 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/oninvalid/index.html @@ -0,0 +1,98 @@ +--- +title: GlobalEventHandlers.oninvalid +slug: Web/API/GlobalEventHandlers/oninvalid +tags: + - API + - Event Handler + - GlobalEventHandlers + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/oninvalid +--- +
{{ ApiRef("HTML DOM") }}
+ +

oninvalid は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("invalid")}} イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。

+ +

invalid イベントは、送信可能な要素が検証され、条件を満たしていない場合に発生します。送信可能な要素の有効性は、フォームを送信する前、またはフォームの checkValidity() メソッドが呼び出された後に検証されます。

+ +

構文

+ +
target.oninvalid = functionRef;
+var functionRef = target.oninvalid;
+
+ +

値

+ +

functionRef は、関数名または関数式です。この関数は、{{domxref("Event")}} オブジェクトを唯一の引数として受け取ります。

+ +

例

+ +

この例は、フォーム上の oninvalid と {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} イベントハンドラーを示しています。

+ +

HTML

+ +
<form id="form">
+  <p id="error" hidden>Please fill out all fields.</p>
+
+  <label for="city">City</label>
+  <input type="text" id="city" required>
+
+  <button type="submit">Submit</button>
+</form>
+<p id="thanks" hidden>Your data has been received. Thanks!</p>
+ +

JavaScript

+ +
const form = document.getElementById('form');
+const error = document.getElementById('error');
+const city = document.getElementById('city');
+const thanks = document.getElementById('thanks');
+
+city.oninvalid = invalid;
+form.onsubmit = submit;
+
+function invalid(event) {
+  error.removeAttribute('hidden');
+}
+
+function submit(event) {
+  form.setAttribute('hidden', '');
+  thanks.removeAttribute('hidden');
+
+  // For this example, don't actually submit the form
+  event.preventDefault();
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG','#handler-oninvalid','oninvalid')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.GlobalEventHandlers.oninvalid")}}

+ +

関連情報

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