New pages for HTML*Element.validity (#35660)

* New pages for HTML*Element.validity

* Comments

* Button fixes

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
 

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

@@ -0,0 +1,44 @@
+---
+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")}} object that represents the validity states this element is in.
+
+## Value
+
+A {{domxref("ValidityState")}} object.
+
+## Examples
+
+The following example demonstrates that a `<button>` is in an invalid state when a {{domxref("ValidityState/customError", "customError")}} is set; in this state, the `validityState`'s `validity` property is `false`, while {{domxref("HTMLFieldSetElement/checkValidity", "checkValidity()")}} returns `true` if the button's {{domxref("HTMLButtonElement/type", "type")}} is not `"submit"`, because such buttons are not candidates for [constraint validation](/en-US/docs/Web/HTML/Constraint_validation).
+
+```js
+const button = document.getElementById("myButton");
+button.setCustomValidity("This button is invalid.");
+const validityState = button.validity;
+console.log(validityState.valid); // false
+console.log(validityState.customError); // true
+console.log(button.checkValidity()); // false if the button is of the "submit" type, true otherwise
+```
+
+## 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,50 @@
+---
+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")}} 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 `<fieldset>` elements based on the validity of its descendant form controls, not the fieldset itself.
+
+## Value
+
+A {{domxref("ValidityState")}} object.
+
+## Examples
+
+The following example demonstrates that a `<fieldset>` 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.");
+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 `<fieldset>` elements based on the validity of its descendant form controls, not the fieldset itself.
+
+## 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 validity of the `<form>` element itself.
+
 ## Syntax
 
 ```js-nolint

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

@@ -0,0 +1,43 @@
+---
+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")}} object that represents the validity states 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");
+const validityState = input.validity;
+if (!validityState.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,21 +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. 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
 
 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`.
+The following example demonstrates that an `<object>` 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
@@ -32,3 +34,11 @@ console.log(object.validity.checkValidity()); // true
 ## 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,44 @@
+---
+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")}} 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
+
+A {{domxref("ValidityState")}} object.
+
+## Examples
+
+The following example demonstrates that an `<output>` 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 object element is invalid.");
+const validityState = output.validity;
+console.log(validityState.valid); // false
+console.log(validityState.customError); // true
+console.log(output.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,43 @@
+---
+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")}} object that represents the validity states 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");
+const validityState = select.validity;
+if (!validityState.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,43 @@
+---
+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")}} object that represents the validity states 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");
+const validityState = textArea.validity;
+if (!validityState.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)