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)