diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index dbb28aaee3fcf6f..4c39f63889ca563 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -8124,7 +8124,7 @@ /en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.ondurationchange /en-US/docs/Web/API/HTMLMediaElement/durationchange_event /en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onemptied /en-US/docs/Web/API/HTMLMediaElement/emptied_event /en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onended /en-US/docs/Web/API/HTMLMediaElement/ended_event -/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.oninvalid /en-US/docs/Web/API/GlobalEventHandlers/oninvalid +/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.oninvalid /en-US/docs/Web/API/HTMLInputElement/invalid_event /en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onloadeddata /en-US/docs/Web/API/GlobalEventHandlers/onloadeddata /en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onloadedmetadata /en-US/docs/Web/API/GlobalEventHandlers/onloadedmetadata /en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onloadstart /en-US/docs/Web/API/GlobalEventHandlers/onloadstart @@ -8164,6 +8164,7 @@ /en-US/docs/Web/API/GlobalEventHandlers/onfocus /en-US/docs/Web/API/Window/focus_event /en-US/docs/Web/API/GlobalEventHandlers/onformdata /en-US/docs/Web/API/HTMLFormElement/formdata_event /en-US/docs/Web/API/GlobalEventHandlers/oninput /en-US/docs/Web/API/HTMLElement/input_event +/en-US/docs/Web/API/GlobalEventHandlers/oninvalid /en-US/docs/Web/API/HTMLInputElement/invalid_event /en-US/docs/Web/API/GlobalEventHandlers/onkeydown /en-US/docs/Web/API/Element/keydown_event /en-US/docs/Web/API/GlobalEventHandlers/onkeypress /en-US/docs/Web/API/Element/keypress_event /en-US/docs/Web/API/GlobalEventHandlers/onkeyup /en-US/docs/Web/API/Element/keyup_event diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 696ac1003e75b64..5f9e08a0ea50cf5 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -44291,17 +44291,6 @@ "jpmedley" ] }, - "Web/API/GlobalEventHandlers/oninvalid": { - "modified": "2020-10-15T21:44:05.936Z", - "contributors": [ - "mfluehr", - "fscholz", - "sideshowbarker", - "wbamberg", - "rolfedh", - "Guillaume-Heras" - ] - }, "Web/API/GlobalEventHandlers/onload": { "modified": "2020-10-15T21:12:46.292Z", "contributors": [ diff --git a/files/en-us/web/api/globaleventhandlers/index.md b/files/en-us/web/api/globaleventhandlers/index.md index eb45e6d124f5192..b44491169c3b241 100644 --- a/files/en-us/web/api/globaleventhandlers/index.md +++ b/files/en-us/web/api/globaleventhandlers/index.md @@ -35,8 +35,6 @@ These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin - : An [event handler](/en-US/docs/Web/Events/Event_handlers) for processing {{domxref("HTMLFormElement/formdata_event", "formdata")}} events, fired after the entry list representing the form's data is constructed. - {{domxref("GlobalEventHandlers.ongotpointercapture")}} - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{domxref("HTMLElement/gotpointercapture_event", "gotpointercapture")}} event type is raised. -- {{domxref("GlobalEventHandlers.oninvalid")}} - - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{domxref("HTMLInputElement/invalid_event", "invalid")}} event is raised. - {{domxref("GlobalEventHandlers.onload")}} - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{domxref("Window/load_event", "load")}} event is raised. - {{domxref("GlobalEventHandlers.onloadeddata")}} diff --git a/files/en-us/web/api/globaleventhandlers/oninvalid/index.md b/files/en-us/web/api/globaleventhandlers/oninvalid/index.md deleted file mode 100644 index c75361696d421f5..000000000000000 --- a/files/en-us/web/api/globaleventhandlers/oninvalid/index.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: GlobalEventHandlers.oninvalid -slug: Web/API/GlobalEventHandlers/oninvalid -page-type: web-api-instance-property -tags: - - API - - Event Handler - - GlobalEventHandlers - - Property - - Reference -browser-compat: api.GlobalEventHandlers.oninvalid ---- -{{ ApiRef("HTML DOM") }} - -The **`oninvalid`** property of the -{{domxref("GlobalEventHandlers")}} mixin is an [event handler](/en-US/docs/Web/Events/Event_handlers) that -processes {{domxref("HTMLInputElement/invalid_event", "invalid")}} events. - -The `invalid` event fires when a submittable element has been checked and -doesn't satisfy its constraints. The validity of submittable elements is checked before -submitting their owner form, or after the -[`checkValidity()`](/en-US/docs/Learn/Forms/Form_validation) -method of the element or its owner form is called. - -## Syntax - -```js -target.oninvalid = functionRef; -var functionRef = target.oninvalid; -``` - -### Value - -`functionRef` is a function name or a [function expression](/en-US/docs/Web/JavaScript/Reference/Operators/function). The function receives a {{domxref("Event")}} object as its sole -argument. - -## Example - -This example demonstrates `oninvalid` and -{{domxref("HTMLFormElement.onsubmit", "onsubmit")}} event handlers on a form. - -### HTML - -```html -
- - - - - - -
- -``` - -### JavaScript - -```js -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(); -} -``` - -### Result - -{{EmbedLiveSample("Example")}} - -## Specifications - -{{Specifications}} - -## Browser compatibility - -{{Compat}} - -## See also - -- {{domxref("HTMLInputElement/invalid_event", "invalid")}} event -- [DOM on-event handlers](/en-US/docs/Web/Events/Event_handlers) diff --git a/files/en-us/web/api/htmlinputelement/invalid_event/index.md b/files/en-us/web/api/htmlinputelement/invalid_event/index.md index e0229528f0fbff3..71238a1e71e735a 100644 --- a/files/en-us/web/api/htmlinputelement/invalid_event/index.md +++ b/files/en-us/web/api/htmlinputelement/invalid_event/index.md @@ -16,31 +16,24 @@ browser-compat: api.HTMLInputElement.invalid_event The **`invalid`** event fires when a submittable element has been checked for validity and doesn't satisfy its constraints. - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableYes
Interface{{DOMxRef("Event")}}
Event handler property{{domxref("GlobalEventHandlers.oninvalid")}}
- This event can be useful for displaying a summary of the problems with a form on submission. When a form is submitted, `invalid` events are fired at each form control that is invalid. The validity of submittable elements is checked before submitting their owner {{HtmlElement("form")}}, or after the [`checkValidity()`](/en-US/docs/Learn/Forms#constraint_validation_api) method of the element or its owner `
` is called. It is not checked on {{domxref("Element/blur_event", "blur")}}. +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('invalid', (event) => {}); + +oninvalid = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. + ## Examples If a form is submitted with an invalid value, the submittable elements are checked and, if an error is found, the `invalid` event will fire on the `invalid` element. In this example, when an invalid event fires because of an invalid value in the input, the invalid value is logged.