From bf3e2f27cb554c66274c9eba3a528ff839a4ce70 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Sat, 31 Aug 2024 14:37:20 -0400 Subject: [PATCH 1/3] New pages for HTML*Element.validity --- .../api/htmlbuttonelement/validity/index.md | 42 +++++++++++++++++ .../checkvalidity/index.md | 3 ++ .../api/htmlfieldsetelement/validity/index.md | 45 +++++++++++++++++++ .../htmlformelement/checkvalidity/index.md | 3 ++ .../api/htmlinputelement/validity/index.md | 42 +++++++++++++++++ .../api/htmlobjectelement/validity/index.md | 23 ++++++++-- .../api/htmloutputelement/validity/index.md | 42 +++++++++++++++++ .../api/htmlselectelement/validity/index.md | 42 +++++++++++++++++ .../api/htmltextareaelement/validity/index.md | 42 +++++++++++++++++ 9 files changed, 281 insertions(+), 3 deletions(-) create mode 100644 files/en-us/web/api/htmlbuttonelement/validity/index.md create mode 100644 files/en-us/web/api/htmlfieldsetelement/validity/index.md create mode 100644 files/en-us/web/api/htmlinputelement/validity/index.md create mode 100644 files/en-us/web/api/htmloutputelement/validity/index.md create mode 100644 files/en-us/web/api/htmlselectelement/validity/index.md create mode 100644 files/en-us/web/api/htmltextareaelement/validity/index.md diff --git a/files/en-us/web/api/htmlbuttonelement/validity/index.md b/files/en-us/web/api/htmlbuttonelement/validity/index.md new file mode 100644 index 000000000000000..3b8acc8e050b6da --- /dev/null +++ b/files/en-us/web/api/htmlbuttonelement/validity/index.md @@ -0,0 +1,42 @@ +--- +title: "HTMLButtonElement: validity property" +short-title: validity +slug: Web/API/HTMLButtonElement/validity +page-type: web-api-instance-property +browser-compat: api.HTMLButtonElement.validity +--- + +{{APIRef("HTML DOM")}} + +The **`validity`** read-only property of the {{domxref("HTMLButtonElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in. + +## Value + +A {{domxref("ValidityState")}} object. + +## Examples + +The following example gets the validity state of a button element and processes it if it is not valid: + +```js +const button = document.getElementById("myButton"); +if (!button.validity.valid) { + // Test each validity state +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLButtonElement.checkValidity()")}} +- {{HTMLElement("button")}} +- {{HTMLElement("form")}} +- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation) +- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation) diff --git a/files/en-us/web/api/htmlfieldsetelement/checkvalidity/index.md b/files/en-us/web/api/htmlfieldsetelement/checkvalidity/index.md index ef87460610172ad..b52dfb9c65f61e8 100644 --- a/files/en-us/web/api/htmlfieldsetelement/checkvalidity/index.md +++ b/files/en-us/web/api/htmlfieldsetelement/checkvalidity/index.md @@ -10,6 +10,9 @@ browser-compat: api.HTMLFieldSetElement.checkValidity The **`checkValidity()`** method of the {{domxref("HTMLFieldSetElement")}} interface checks if the element is valid, but always returns true because {{HTMLElement("fieldset")}} elements are never candidates for [constraint validation](/en-US/docs/Web/HTML/Constraint_validation) . +> [!NOTE] +> The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied to `
` elements based on the validity of its descendant form controls, not the fieldset itself. + ## Syntax ```js-nolint diff --git a/files/en-us/web/api/htmlfieldsetelement/validity/index.md b/files/en-us/web/api/htmlfieldsetelement/validity/index.md new file mode 100644 index 000000000000000..bfa01cdb0f323bd --- /dev/null +++ b/files/en-us/web/api/htmlfieldsetelement/validity/index.md @@ -0,0 +1,45 @@ +--- +title: "HTMLFieldSetElement: validity property" +short-title: validity +slug: Web/API/HTMLFieldSetElement/validity +page-type: web-api-instance-property +browser-compat: api.HTMLFieldSetElement.validity +--- + +{{APIRef("HTML DOM")}} + +The **`validity`** read-only property of the {{domxref("HTMLFieldSetElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in. Although {{HTMLElement("fieldset")}} elements are never candidates for [constraint validation](/en-US/docs/Web/HTML/Constraint_validation), the validity state may still be invalid if a custom validity message has been set. + +> [!NOTE] +> The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied to `
` elements based on the validity of its descendant form controls, not the fieldset itself. + +## Value + +A {{domxref("ValidityState")}} object. + +## Examples + +The following example shows how you can have a `
` in an invalid state, even when {{domxref("HTMLFieldSetElement/checkValidity", "checkValidity()")}} returns `true`. + +```js +const fieldSet = document.getElementById("myFieldSet"); +fieldSet.setCustomValidity("This fieldset is invalid."); +console.log(fieldSet.validity.valid); // false +console.log(fieldSet.validity.checkValidity()); // true +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLFieldSetElement.checkValidity()")}} +- {{HTMLElement("fieldset")}} +- {{HTMLElement("form")}} +- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation) +- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation) diff --git a/files/en-us/web/api/htmlformelement/checkvalidity/index.md b/files/en-us/web/api/htmlformelement/checkvalidity/index.md index 57571d47d7f628f..a77e33dbfdfd4af 100644 --- a/files/en-us/web/api/htmlformelement/checkvalidity/index.md +++ b/files/en-us/web/api/htmlformelement/checkvalidity/index.md @@ -10,6 +10,9 @@ browser-compat: api.HTMLFormElement.checkValidity The **`checkValidity()`** method of the {{domxref("HTMLFormElement")}} interface returns a boolean value which indicates if all associated controls meet any [constraint validation](/en-US/docs/Web/HTML/Constraint_validation) rules applied to them. The method also fires an {{domxref("HTMLElement/invalid_event", "invalid")}} event on each invalid element, but not on the form element itself. Because there's no default browser behavior for `checkValidity()`, canceling this `invalid` event has no effect. +> [!NOTE] +> The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied to `
` elements based on the validity of its owned form controls, not the fieldset itself. + ## Syntax ```js-nolint diff --git a/files/en-us/web/api/htmlinputelement/validity/index.md b/files/en-us/web/api/htmlinputelement/validity/index.md new file mode 100644 index 000000000000000..4129bdc43873a98 --- /dev/null +++ b/files/en-us/web/api/htmlinputelement/validity/index.md @@ -0,0 +1,42 @@ +--- +title: "HTMLInputElement: validity property" +short-title: validity +slug: Web/API/HTMLInputElement/validity +page-type: web-api-instance-property +browser-compat: api.HTMLInputElement.validity +--- + +{{APIRef("HTML DOM")}} + +The **`validity`** read-only property of the {{domxref("HTMLInputElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in. + +## Value + +A {{domxref("ValidityState")}} object. + +## Examples + +The following example gets the validity state of an input element and processes it if it is not valid: + +```js +const input = document.getElementById("myInput"); +if (!input.validity.valid) { + // Test each validity state +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLInputElement.checkValidity()")}} +- {{HTMLElement("input")}} +- {{HTMLElement("form")}} +- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation) +- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation) diff --git a/files/en-us/web/api/htmlobjectelement/validity/index.md b/files/en-us/web/api/htmlobjectelement/validity/index.md index 323a8d0c66d5750..eeff2f411c47aa9 100644 --- a/files/en-us/web/api/htmlobjectelement/validity/index.md +++ b/files/en-us/web/api/htmlobjectelement/validity/index.md @@ -8,14 +8,23 @@ browser-compat: api.HTMLObjectElement.validity {{APIRef("HTML DOM")}} -The **`validity`** read-only property of the -{{domxref("HTMLObjectElement")}} interface returns a {{domxref("ValidityState")}} with -the validity states that this element is in. +The **`validity`** read-only property of the {{domxref("HTMLObjectElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in. Although {{HTMLElement("object")}} elements are never candidates for [constraint validation](/en-US/docs/Web/HTML/Constraint_validation), the validity state may still be invalid if a custom validity message has been set. ## Value A {{domxref("ValidityState")}} object. +## Examples + +The following example shows how you can have an `` in an invalid state, even when {{domxref("HTMLObjectElement/checkValidity", "checkValidity()")}} returns `true`. + +```js +const object = document.getElementById("myObjectElement"); +object.setCustomValidity("This object is invalid."); +console.log(object.validity.valid); // false +console.log(object.validity.checkValidity()); // true +``` + ## Specifications {{Specifications}} @@ -23,3 +32,11 @@ A {{domxref("ValidityState")}} object. ## Browser compatibility {{Compat}} + +## See also + +- {{domxref("HTMLObjectElement.checkValidity()")}} +- {{HTMLElement("object")}} +- {{HTMLElement("form")}} +- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation) +- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation) diff --git a/files/en-us/web/api/htmloutputelement/validity/index.md b/files/en-us/web/api/htmloutputelement/validity/index.md new file mode 100644 index 000000000000000..ce8692a969e28c2 --- /dev/null +++ b/files/en-us/web/api/htmloutputelement/validity/index.md @@ -0,0 +1,42 @@ +--- +title: "HTMLOutputElement: validity property" +short-title: validity +slug: Web/API/HTMLOutputElement/validity +page-type: web-api-instance-property +browser-compat: api.HTMLOutputElement.validity +--- + +{{APIRef("HTML DOM")}} + +The **`validity`** read-only property of the {{domxref("HTMLOutputElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in. Although {{HTMLElement("output")}} elements are never candidates for [constraint validation](/en-US/docs/Web/HTML/Constraint_validation), the validity state may still be invalid if a custom validity message has been set. + +## Value + +A {{domxref("ValidityState")}} object. + +## Examples + +The following example shows how you can have a `` in an invalid state, even when {{domxref("HTMLOutputElement/checkValidity", "checkValidity()")}} returns `true`. + +```js +const output = document.getElementById("myOutput"); +output.setCustomValidity("This output is invalid."); +console.log(output.validity.valid); // false +console.log(output.validity.checkValidity()); // true +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLOutputElement.checkValidity()")}} +- {{HTMLElement("output")}} +- {{HTMLElement("form")}} +- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation) +- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation) diff --git a/files/en-us/web/api/htmlselectelement/validity/index.md b/files/en-us/web/api/htmlselectelement/validity/index.md new file mode 100644 index 000000000000000..78e12d363fdeec9 --- /dev/null +++ b/files/en-us/web/api/htmlselectelement/validity/index.md @@ -0,0 +1,42 @@ +--- +title: "HTMLSelectElement: validity property" +short-title: validity +slug: Web/API/HTMLSelectElement/validity +page-type: web-api-instance-property +browser-compat: api.HTMLSelectElement.validity +--- + +{{APIRef("HTML DOM")}} + +The **`validity`** read-only property of the {{domxref("HTMLSelectElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in. + +## Value + +A {{domxref("ValidityState")}} object. + +## Example + +The following example gets the validity state of a select element and processes it if it is not valid: + +```js +const select = document.getElementById("mySelect"); +if (!select.validity.valid) { + // Test each validity state +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLSelectElement.checkValidity()")}} +- {{HTMLElement("select")}} +- {{HTMLElement("form")}} +- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation) +- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation) diff --git a/files/en-us/web/api/htmltextareaelement/validity/index.md b/files/en-us/web/api/htmltextareaelement/validity/index.md new file mode 100644 index 000000000000000..919aeb03b026ead --- /dev/null +++ b/files/en-us/web/api/htmltextareaelement/validity/index.md @@ -0,0 +1,42 @@ +--- +title: "HTMLTextAreaElement: validity property" +short-title: validity +slug: Web/API/HTMLTextAreaElement/validity +page-type: web-api-instance-property +browser-compat: api.HTMLTextAreaElement.validity +--- + +{{APIRef("HTML DOM")}} + +The **`validity`** read-only property of the {{domxref("HTMLTextAreaElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in. + +## Value + +A {{domxref("ValidityState")}} object. + +## Examples + +The following example gets the validity state of a text area element and processes it if it is not valid: + +```js +const textArea = document.getElementById("myTextArea"); +if (!textArea.validity.valid) { + // Test each validity state +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLTextAreaElement.checkValidity()")}} +- {{HTMLElement("textarea")}} +- {{HTMLElement("form")}} +- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation) +- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation) From 7e5ce359c2c6be676fe642025847fca0c08f5ff2 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Tue, 10 Sep 2024 13:13:03 -0400 Subject: [PATCH 2/3] Comments --- .../web/api/htmlbuttonelement/validity/index.md | 2 +- .../web/api/htmlfieldsetelement/validity/index.md | 13 +++++++++---- .../web/api/htmlformelement/checkvalidity/index.md | 2 +- .../web/api/htmlinputelement/validity/index.md | 2 +- .../web/api/htmlobjectelement/validity/index.md | 14 ++++++++------ .../web/api/htmloutputelement/validity/index.md | 12 +++++++----- .../web/api/htmlselectelement/validity/index.md | 5 +++-- .../web/api/htmltextareaelement/validity/index.md | 5 +++-- 8 files changed, 33 insertions(+), 22 deletions(-) diff --git a/files/en-us/web/api/htmlbuttonelement/validity/index.md b/files/en-us/web/api/htmlbuttonelement/validity/index.md index 3b8acc8e050b6da..7f5c4f787f4055c 100644 --- a/files/en-us/web/api/htmlbuttonelement/validity/index.md +++ b/files/en-us/web/api/htmlbuttonelement/validity/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLButtonElement.validity {{APIRef("HTML DOM")}} -The **`validity`** read-only property of the {{domxref("HTMLButtonElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in. +The **`validity`** read-only property of the {{domxref("HTMLButtonElement")}} interface returns a {{domxref("ValidityState")}} object that represents the validity states this element is in. ## Value diff --git a/files/en-us/web/api/htmlfieldsetelement/validity/index.md b/files/en-us/web/api/htmlfieldsetelement/validity/index.md index bfa01cdb0f323bd..d56fd168e154e3c 100644 --- a/files/en-us/web/api/htmlfieldsetelement/validity/index.md +++ b/files/en-us/web/api/htmlfieldsetelement/validity/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLFieldSetElement.validity {{APIRef("HTML DOM")}} -The **`validity`** read-only property of the {{domxref("HTMLFieldSetElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in. Although {{HTMLElement("fieldset")}} elements are never candidates for [constraint validation](/en-US/docs/Web/HTML/Constraint_validation), the validity state may still be invalid if a custom validity message has been set. +The **`validity`** read-only property of the {{domxref("HTMLFieldSetElement")}} interface returns a {{domxref("ValidityState")}} object that represents the validity states this element is in. Although {{HTMLElement("fieldset")}} elements are never candidates for [constraint validation](/en-US/docs/Web/HTML/Constraint_validation), the validity state may still be invalid if a custom validity message has been set. > [!NOTE] > The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied to `
` elements based on the validity of its descendant form controls, not the fieldset itself. @@ -19,15 +19,20 @@ A {{domxref("ValidityState")}} object. ## Examples -The following example shows how you can have a `
` in an invalid state, even when {{domxref("HTMLFieldSetElement/checkValidity", "checkValidity()")}} returns `true`. +The following example demonstrates that a `
` is in an invalid state when a {{domxref("ValidityState/customError", "customError")}} is set; in this state, {{domxref("HTMLFieldSetElement/checkValidity", "checkValidity()")}} returns `true` while the `validityState`'s `validity` property is `false`. ```js const fieldSet = document.getElementById("myFieldSet"); fieldSet.setCustomValidity("This fieldset is invalid."); -console.log(fieldSet.validity.valid); // false -console.log(fieldSet.validity.checkValidity()); // true +const validityState = fieldSet.validity; +console.log(validityState.valid); // false +console.log(validityState.customError); // true +console.log(fieldSet.checkValidity()); // true ``` +> [!NOTE] +> The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied to `
` elements based on the validity of its descendant form controls, not the fieldset itself. + ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/htmlformelement/checkvalidity/index.md b/files/en-us/web/api/htmlformelement/checkvalidity/index.md index a77e33dbfdfd4af..d06e69ac826de86 100644 --- a/files/en-us/web/api/htmlformelement/checkvalidity/index.md +++ b/files/en-us/web/api/htmlformelement/checkvalidity/index.md @@ -11,7 +11,7 @@ browser-compat: api.HTMLFormElement.checkValidity The **`checkValidity()`** method of the {{domxref("HTMLFormElement")}} interface returns a boolean value which indicates if all associated controls meet any [constraint validation](/en-US/docs/Web/HTML/Constraint_validation) rules applied to them. The method also fires an {{domxref("HTMLElement/invalid_event", "invalid")}} event on each invalid element, but not on the form element itself. Because there's no default browser behavior for `checkValidity()`, canceling this `invalid` event has no effect. > [!NOTE] -> The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied to `` elements based on the validity of its owned form controls, not the fieldset itself. +> The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied to `` elements based on the validity of its owned form controls, not the validity of the `` element itself. ## Syntax diff --git a/files/en-us/web/api/htmlinputelement/validity/index.md b/files/en-us/web/api/htmlinputelement/validity/index.md index 4129bdc43873a98..7fb1b09d6e3b46c 100644 --- a/files/en-us/web/api/htmlinputelement/validity/index.md +++ b/files/en-us/web/api/htmlinputelement/validity/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLInputElement.validity {{APIRef("HTML DOM")}} -The **`validity`** read-only property of the {{domxref("HTMLInputElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in. +The **`validity`** read-only property of the {{domxref("HTMLInputElement")}} interface returns a {{domxref("ValidityState")}} object that represents the validity states this element is in. ## Value diff --git a/files/en-us/web/api/htmlobjectelement/validity/index.md b/files/en-us/web/api/htmlobjectelement/validity/index.md index eeff2f411c47aa9..a3d193c7d5fb4ee 100644 --- a/files/en-us/web/api/htmlobjectelement/validity/index.md +++ b/files/en-us/web/api/htmlobjectelement/validity/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLObjectElement.validity {{APIRef("HTML DOM")}} -The **`validity`** read-only property of the {{domxref("HTMLObjectElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in. Although {{HTMLElement("object")}} elements are never candidates for [constraint validation](/en-US/docs/Web/HTML/Constraint_validation), the validity state may still be invalid if a custom validity message has been set. +The **`validity`** read-only property of the {{domxref("HTMLObjectElement")}} interface returns a {{domxref("ValidityState")}} object that represents the validity states this element is in. Although {{HTMLElement("object")}} elements are never candidates for [constraint validation](/en-US/docs/Web/HTML/Constraint_validation), the validity state may still be invalid if a custom validity message has been set. ## Value @@ -16,13 +16,15 @@ A {{domxref("ValidityState")}} object. ## Examples -The following example shows how you can have an `` in an invalid state, even when {{domxref("HTMLObjectElement/checkValidity", "checkValidity()")}} returns `true`. +The following example demonstrates that an `` is in an invalid state when a {{domxref("ValidityState/customError", "customError")}} is set; in this state, {{domxref("HTMLObjectElement/checkValidity", "checkValidity()")}} returns `true` while the `validityState`'s `validity` property is `false`. ```js -const object = document.getElementById("myObjectElement"); -object.setCustomValidity("This object is invalid."); -console.log(object.validity.valid); // false -console.log(object.validity.checkValidity()); // true +const objectElem = document.getElementById("myObjectElm"); +objectElem.setCustomValidity("This object element is invalid."); +const validityState = objectElem.validity; +console.log(validityState.valid); // false +console.log(validityState.customError); // true +console.log(objectElem.checkValidity()); // true ``` ## Specifications diff --git a/files/en-us/web/api/htmloutputelement/validity/index.md b/files/en-us/web/api/htmloutputelement/validity/index.md index ce8692a969e28c2..b9f595e889e1ebb 100644 --- a/files/en-us/web/api/htmloutputelement/validity/index.md +++ b/files/en-us/web/api/htmloutputelement/validity/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLOutputElement.validity {{APIRef("HTML DOM")}} -The **`validity`** read-only property of the {{domxref("HTMLOutputElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in. Although {{HTMLElement("output")}} elements are never candidates for [constraint validation](/en-US/docs/Web/HTML/Constraint_validation), the validity state may still be invalid if a custom validity message has been set. +The **`validity`** read-only property of the {{domxref("HTMLOutputElement")}} interface returns a {{domxref("ValidityState")}} object that represents the validity states this element is in. Although {{HTMLElement("output")}} elements are never candidates for [constraint validation](/en-US/docs/Web/HTML/Constraint_validation), the validity state may still be invalid if a custom validity message has been set. ## Value @@ -16,13 +16,15 @@ A {{domxref("ValidityState")}} object. ## Examples -The following example shows how you can have a `` in an invalid state, even when {{domxref("HTMLOutputElement/checkValidity", "checkValidity()")}} returns `true`. +The following example demonstrates that an `` is in an invalid state when a {{domxref("ValidityState/customError", "customError")}} is set; in this state, {{domxref("HTMLOutputElement/checkValidity", "checkValidity()")}} returns `true` while the `validityState`'s `validity` property is `false`. ```js const output = document.getElementById("myOutput"); -output.setCustomValidity("This output is invalid."); -console.log(output.validity.valid); // false -console.log(output.validity.checkValidity()); // true +output.setCustomValidity("This object element is invalid."); +const validityState = output.validity; +console.log(validityState.valid); // false +console.log(validityState.customError); // true +console.log(output.checkValidity()); // true ``` ## Specifications diff --git a/files/en-us/web/api/htmlselectelement/validity/index.md b/files/en-us/web/api/htmlselectelement/validity/index.md index 78e12d363fdeec9..e0367be545b992e 100644 --- a/files/en-us/web/api/htmlselectelement/validity/index.md +++ b/files/en-us/web/api/htmlselectelement/validity/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLSelectElement.validity {{APIRef("HTML DOM")}} -The **`validity`** read-only property of the {{domxref("HTMLSelectElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in. +The **`validity`** read-only property of the {{domxref("HTMLSelectElement")}} interface returns a {{domxref("ValidityState")}} object that represents the validity states this element is in. ## Value @@ -20,7 +20,8 @@ The following example gets the validity state of a select element and processes ```js const select = document.getElementById("mySelect"); -if (!select.validity.valid) { +const validityState = select.validity; +if (!validityState.valid) { // Test each validity state } ``` diff --git a/files/en-us/web/api/htmltextareaelement/validity/index.md b/files/en-us/web/api/htmltextareaelement/validity/index.md index 919aeb03b026ead..c9077b026a30c40 100644 --- a/files/en-us/web/api/htmltextareaelement/validity/index.md +++ b/files/en-us/web/api/htmltextareaelement/validity/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLTextAreaElement.validity {{APIRef("HTML DOM")}} -The **`validity`** read-only property of the {{domxref("HTMLTextAreaElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in. +The **`validity`** read-only property of the {{domxref("HTMLTextAreaElement")}} interface returns a {{domxref("ValidityState")}} object that represents the validity states this element is in. ## Value @@ -20,7 +20,8 @@ The following example gets the validity state of a text area element and process ```js const textArea = document.getElementById("myTextArea"); -if (!textArea.validity.valid) { +const validityState = textArea.validity; +if (!validityState.valid) { // Test each validity state } ``` From 39d4a948da38685e2566b98f366ea6f147950ae6 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Tue, 10 Sep 2024 13:23:39 -0400 Subject: [PATCH 3/3] Button fixes --- .../web/api/htmlbuttonelement/checkvalidity/index.md | 4 ++-- .../en-us/web/api/htmlbuttonelement/validity/index.md | 10 ++++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/api/htmlbuttonelement/checkvalidity/index.md b/files/en-us/web/api/htmlbuttonelement/checkvalidity/index.md index c95b268c0201dcd..99c9ad21ac32c68 100644 --- a/files/en-us/web/api/htmlbuttonelement/checkvalidity/index.md +++ b/files/en-us/web/api/htmlbuttonelement/checkvalidity/index.md @@ -8,10 +8,10 @@ browser-compat: api.HTMLButtonElement.checkValidity {{APIRef("HTML DOM")}} -The **`checkValidity()`** method of the {{domxref("HTMLButtonElement")}} interface returns a boolean value which indicates if the element meets any [constraint validation](/en-US/docs/Web/HTML/Constraint_validation) rules applied to it. If false, the method also fires an {{domxref("HTMLElement/invalid_event", "invalid")}} event on the element. Because there's no default browser behavior for `checkValidity()`, canceling this `invalid` event has no effect. +The **`checkValidity()`** method of the {{domxref("HTMLButtonElement")}} interface returns a boolean value which indicates if the element meets any [constraint validation](/en-US/docs/Web/HTML/Constraint_validation) rules applied to it. If false, the method also fires an {{domxref("HTMLElement/invalid_event", "invalid")}} event on the element. Because there's no default browser behavior for `checkValidity()`, canceling this `invalid` event has no effect. It always returns true if the {{HTMLElement("button")}} element's {{domxref("HTMLButtonElement/type", "type")}} is `"button"` or `"reset"`, because such buttons are never candidates for [constraint validation](/en-US/docs/Web/HTML/Constraint_validation). > [!NOTE] -> An HTML {{htmlelement("button")}} element with a non-null {{domxref("HTMLButtonElement.validationMessage", "validationMessage")}} is considered invalid, will match the CSS {{cssxref(":invalid")}} pseudo-class, and will cause `checkValidity()` to return false. Use the {{domxref("HTMLButtonElement.setCustomValidity()")}} method to set the {{domxref("HTMLButtonElement.validationMessage")}} to the empty string to set the {{domxref("HTMLButtonElement.validity", "validity")}} state to be valid. +> An HTML {{htmlelement("button")}} element of the `"submit"` type with a non-null {{domxref("HTMLButtonElement.validationMessage", "validationMessage")}} is considered invalid, will match the CSS {{cssxref(":invalid")}} pseudo-class, and will cause `checkValidity()` to return false. Use the {{domxref("HTMLButtonElement.setCustomValidity()")}} method to set the {{domxref("HTMLButtonElement.validationMessage")}} to the empty string to set the {{domxref("HTMLButtonElement.validity", "validity")}} state to be valid. ## Syntax diff --git a/files/en-us/web/api/htmlbuttonelement/validity/index.md b/files/en-us/web/api/htmlbuttonelement/validity/index.md index 7f5c4f787f4055c..276f960ef5d9d2a 100644 --- a/files/en-us/web/api/htmlbuttonelement/validity/index.md +++ b/files/en-us/web/api/htmlbuttonelement/validity/index.md @@ -16,13 +16,15 @@ A {{domxref("ValidityState")}} object. ## Examples -The following example gets the validity state of a button element and processes it if it is not valid: +The following example demonstrates that a `