New pages: missing checkvalidity() and reportvalidity() API method pa…

…ges (#35546)

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

@@ -0,0 +1,54 @@
+---
+title: "HTMLButtonElement: checkValidity() method"
+short-title: checkValidity()
+slug: Web/API/HTMLButtonElement/checkValidity
+page-type: web-api-instance-method
+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.
+
+> [!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.
+
+## Syntax
+
+```js-nolint
+checkValidity()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+Returns `true` if the element's value has no validity problems; otherwise, returns `false`.
+
+## Examples
+
+In the following example, calling `checkValidity()` returns either `true` or `false`.
+
+```js
+const element = document.getElementById("myButton");
+console.log(element.checkValidity());
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLButtonElement.reportValidity()")}}
+- {{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)
+- CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} pseudo-classes

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

@@ -0,0 +1,140 @@
+---
+title: "HTMLButtonElement: reportValidity() method"
+short-title: reportValidity()
+slug: Web/API/HTMLButtonElement/reportValidity
+page-type: web-api-instance-method
+browser-compat: api.HTMLButtonElement.reportValidity
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`reportValidity()`** method of the {{domxref("HTMLButtonElement")}} interface performs the same validity checking steps as the {{domxref("HTMLButtonElement.checkValidity", "checkValidity()")}} method. In addition, if the {{domxref("HTMLElement/invalid_event", "invalid")}} event is not canceled, the browser displays the problem to the user.
+
+## Syntax
+
+```js-nolint
+reportValidity()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+Returns `true` if the element's value has no validity problems; otherwise, returns `false`.
+
+### Examples
+
+This far fetched example demonstrates how a button can be made invalid.
+
+#### HTML
+
+We create a form that only contains a few buttons:
+
+```html
+<form action="#" id="form" method="post">
+  <p>
+    <input type="submit" value="Submit" />
+    <button id="example" type="submit" value="fixed">THIS BUTTON</button>
+  </p>
+  <p>
+    <button type="button" id="report">reportValidity()</button>
+  </p>
+</form>
+
+<p id="log"></p>
+```
+
+#### CSS
+
+We add a bit of CSS, including `:valid` and `:invalid` styles for our button:
+
+```css
+input[type="submit"],
+button {
+  background-color: #33a;
+  border: none;
+  font-size: 1.3rem;
+  padding: 5px 10px;
+  color: white;
+}
+button:invalid {
+  background-color: #a33;
+}
+button:valid {
+  background-color: #3a3;
+}
+```
+
+#### JavaScript
+
+We include a function to toggle the value, content, and validation message of the example button:
+
+```js
+const reportButton = document.querySelector("#report");
+const exampleButton = document.querySelector("#example");
+const output = document.querySelector("#log");
+
+reportButton.addEventListener("click", () => {
+  const reportVal = exampleButton.reportValidity();
+  output.innerHTML = `reportValidity returned: ${reportVal} <br/> custom error: ${exampleButton.validationMessage}`;
+});
+
+exampleButton.addEventListener("invalid", () => {
+  console.log("Invalid event fired on exampleButton");
+});
+
+exampleButton.addEventListener("click", (e) => {
+  e.preventDefault();
+  if (exampleButton.value == "error") {
+    breakOrFixButton("fixed");
+  } else {
+    breakOrFixButton("error");
+  }
+  output.innerHTML = `validation message: ${exampleButton.validationMessage} <br/> custom error: ${exampleButton.validationMessage}`;
+});
+
+const breakOrFixButton = () => {
+  const state = toggleButton();
+  if (state == "error") {
+    exampleButton.setCustomValidity("This is a custom error message");
+  } else {
+    exampleButton.setCustomValidity("");
+  }
+};
+
+const toggleButton = () => {
+  if (exampleButton.value == "error") {
+    exampleButton.value = "fixed";
+    exampleButton.innerHTML = "No error";
+  } else {
+    exampleButton.value = "error";
+    exampleButton.innerHTML = "Custom error";
+  }
+  return exampleButton.value;
+};
+```
+
+#### Results
+
+{{EmbedLiveSample("Custom error message", "100%", 220)}}
+
+The button is by default valid. Activate "THIS BUTTON" to change the value, content, and add a custom error message. Activating the "reportValidity()" button checks the validity of the button, reporting the custom error message to the user and throwing an `invalid` event if the button does not pass contstraint validation due to the message.
+
+## 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)
+- CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} pseudo-classes

files/en-us/web/api/htmlfieldsetelement/checkvalidity/index.md

@@ -0,0 +1,50 @@
+---
+title: "HTMLFieldSetElement: checkValidity() method"
+short-title: checkValidity()
+slug: Web/API/HTMLFieldSetElement/checkValidity
+page-type: web-api-instance-method
+browser-compat: api.HTMLFieldSetElement.checkValidity
+---
+
+{{APIRef("HTML DOM")}}
+
+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) .
+
+## Syntax
+
+```js-nolint
+checkValidity()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A boolean value, `true`.
+
+## Examples
+
+In the following example, calling `checkValidity()` returns `true`.
+
+```js
+const element = document.getElementById("myFieldSet");
+console.log(element.checkValidity());
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLFieldSetElement.reportValidity()")}}
+- {{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/htmlfieldsetelement/reportvalidity/index.md

@@ -0,0 +1,41 @@
+---
+title: "HTMLFieldSetElement: reportValidity() method"
+short-title: reportValidity()
+slug: Web/API/HTMLFieldSetElement/reportValidity
+page-type: web-api-instance-method
+browser-compat: api.HTMLFieldSetElement.reportValidity
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`reportValidity()`** method of the {{domxref("HTMLFieldSetElement")}} interface performs the same validity checking steps as the {{domxref("HTMLFieldSetElement.checkValidity", "checkValidity()")}} method. It always returns true because {{HTMLElement("fieldset")}} elements are never candidates for [constraint validation](/en-US/docs/Web/HTML/Constraint_validation) .
+
+## Syntax
+
+```js-nolint
+reportValidity()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A boolean value, `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

@@ -0,0 +1,49 @@
+---
+title: "HTMLFormElement: checkValidity() method"
+short-title: checkValidity()
+slug: Web/API/HTMLFormElement/checkValidity
+page-type: web-api-instance-method
+browser-compat: api.HTMLFormElement.checkValidity
+---
+
+{{APIRef("HTML DOM")}}
+
+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.
+
+## Syntax
+
+```js-nolint
+checkValidity()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+Returns `true` if the associated controls' values have no validity problems; otherwise, returns `false`.
+
+## Examples
+
+In the following example, calling `checkValidity()` would return `true` if or `false`.
+
+```js
+const element = document.getElementById("myForm");
+console.log(element.checkValidity());
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLFormElement.reportValidity()")}}
+- {{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/reportvalidity/index.md

@@ -8,21 +8,21 @@ browser-compat: api.HTMLFormElement.reportValidity
 
 {{APIRef("HTML DOM")}}
 
-The **`HTMLFormElement.reportValidity()`** method returns
-`true` if the element's child controls satisfy their validation constraints.
-When `false` is returned, cancelable
-[`invalid`](/en-US/docs/Web/API/HTMLInputElement/invalid_event) events are fired for
-each invalid child and validation problems are reported to the user.
+The **`reportValidity()`** method of the {{domxref("HTMLFormElement")}} interface performs the same validity checking steps as the {{domxref("HTMLFormElement.checkValidity", "checkValidity()")}} method. In addition, for each {{domxref("HTMLElement/invalid_event", "invalid")}} event that was fired and not canceled, the browser displays the problem to the user.
 
 ## Syntax
 
 ```js-nolint
 reportValidity()
 ```
 
+### Parameters
+
+None.
+
 ### Return value
 
-`true` or `false`
+Returns `true` if the associated controls' values have no validity problems; otherwise, returns `false`.
 
 ## Example
 
@@ -43,3 +43,10 @@ document.forms["myform"].addEventListener(
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{domxref("HTMLFormElement.checkValidity()")}}
+- {{HTMLElement("form")}}
+- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation)
+- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation)