New pages for HTML*Element.validity

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)

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 `<fieldset>` elements based on the validity of its descendant form controls, not the fieldset itself.
+
 ## Syntax
 
 ```js-nolint

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 `<fieldset>` 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 `<fieldset>` 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)

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 `<form>` elements based on the validity of its owned form controls, not the fieldset itself.
+
 ## Syntax
 
 ```js-nolint

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)

files/en-us/web/api/htmlobjectelement/validity/index.md

@@ -8,18 +8,35 @@ 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 `<object>` 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}}
 
 ## 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)

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 `<output>` 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)

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)

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)