New pages: HTMLxElement.setCustomValidity()

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

@@ -0,0 +1,58 @@
+---
+title: "HTMLButtonElement: setCustomValidity() method"
+short-title: setCustomValidity()
+slug: Web/API/HTMLButtonElement/setCustomValidity
+page-type: web-api-instance-method
+browser-compat: api.HTMLButtonElement.setCustomValidity
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`setCustomValidity()`** method of the {{DOMxRef("HTMLButtonElement")}} interface sets the custom validity message for the {{htmlelement("button")}} element. Use the empty string to indicate that the element does _not_ have a custom validity error.
+
+## Syntax
+
+```js-nolint
+setCustomValidity(string)
+```
+
+### Parameters
+
+- `string`
+  - : The string containing the error message. The empty string removes any custom validity errors.
+
+### Return value
+
+None ({{jsxref("undefined")}}).
+
+## Examples
+
+```js
+const errorButton = document.getElementById("checkErrors");
+const errors = issuesToReport();
+if (errors) {
+  errorButton.setCustomValidity("There is an error");
+} else {
+  errorButton.setCustomValidity("");
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLelement("button")}}
+- {{domxref("HTMLButtonElement")}}
+- {{domxref("HTMLButtonElement.validity")}}
+- {{domxref("HTMLButtonElement.checkValidity()")}}
+- {{domxref("HTMLButtonElement.reportValidity()")}}
+- [Form validation](/en-US/docs/Web/HTML/Constraint_validation).
+- [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/setcustomvalidity/index.md

@@ -0,0 +1,60 @@
+---
+title: "HTMLFieldSetElement: setCustomValidity() method"
+short-title: setCustomValidity()
+slug: Web/API/HTMLFieldSetElement/setCustomValidity
+page-type: web-api-instance-method
+browser-compat: api.HTMLFieldSetElement.setCustomValidity
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`setCustomValidity()`** method of the {{DOMxRef("HTMLFieldSetElement")}} interface sets the custom validity message for the {{htmlelement("fieldset")}} element. Use the empty string to indicate that the element does _not_ have a custom validity error.
+
+The `<fieldset>` element is not a candidate for constraint validation. The {{DOMxRef("HTMLFieldSetElement.reportValidity()", "reportValidity()")}} method will not cause the custom error message to be displayed to the user, but does set the {{DOMxRef("ValidityState.customError", "customError")}} property of the element's {{DOMxRef("ValidityState")}} object to `true` and the {{DOMxRef("ValidityState.valid", "valid")}} property to `false`.
+
+## Syntax
+
+```js-nolint
+setCustomValidity(string)
+```
+
+### Parameters
+
+- `string`
+  - : The string containing the error message. The empty string removes any custom validity errors.
+
+### Return value
+
+None ({{jsxref("undefined")}}).
+
+## Examples
+
+```js
+const errorFieldSet = document.getElementById("checkErrors");
+const errors = issuesToReport();
+if (errors) {
+  errorFieldSet.setCustomValidity("There is an error");
+} else {
+  errorFieldSet.setCustomValidity("");
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLelement("fieldset")}}
+- {{domxref("HTMLFieldSetElement")}}
+- {{domxref("HTMLFieldSetElement.validity")}}
+- {{domxref("HTMLFieldSetElement.checkValidity()")}}
+- {{domxref("HTMLFieldSetElement.reportValidity()")}}
+- [Form validation](/en-US/docs/Web/HTML/Constraint_validation).
+- [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/htmloutputelement/setcustomvalidity/index.md

@@ -0,0 +1,62 @@
+---
+title: "HTMLOutputElement: setCustomValidity() method"
+short-title: setCustomValidity()
+slug: Web/API/HTMLOutputElement/setCustomValidity
+page-type: web-api-instance-method
+browser-compat: api.HTMLOutputElement.setCustomValidity
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`setCustomValidity()`** method of the {{DOMxRef("HTMLOutputElement")}} interface sets the custom validity message for the {{htmlelement("output")}} element. Use the empty string to indicate that the element does _not_ have a custom validity error.
+
+The `<output>` element is not a candidate for constraint validation. The {{DOMxRef("HTMLOutputElement.reportValidity()", "reportValidity()")}} method will not cause the custom error message to be displayed to the user, but does set the {{DOMxRef("ValidityState.customError", "customError")}} property of the element's {{DOMxRef("ValidityState")}} object to `true` and the {{DOMxRef("ValidityState.valid", "valid")}} property to `false`.
+
+## Syntax
+
+```js-nolint
+setCustomValidity(string)
+```
+
+### Parameters
+
+- `string`
+  - : The string containing the error message. The empty string removes any custom validity errors.
+
+### Return value
+
+None ({{jsxref("undefined")}}).
+
+## Examples
+
+In this example, if the `<output>`'s {{domxref("HTMLOutputElement.value", "value")}} is not a non-zero number, we set a custom error message. If it is a number, we set the custom error to an empty string:
+
+```js
+const cart = document.getElementById("cart-form");
+const total = cart.elements("total");
+if (parseFloat(total.value)) {
+  errorOutput.setCustomValidity("");
+} else {
+  errorOutput.setCustomValidity("There is an error");
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLelement("output")}}
+- {{domxref("HTMLOutputElement")}}
+- {{domxref("HTMLOutputElement.validity")}}
+- {{domxref("HTMLOutputElement.checkValidity()")}}
+- {{domxref("HTMLOutputElement.reportValidity()")}}
+- [Form validation](/en-US/docs/Web/HTML/Constraint_validation).
+- [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/htmlselectelement/setcustomvalidity/index.md

@@ -22,7 +22,7 @@ setCustomValidity(string)
 ### Parameters
 
 - `string`
-  - : The string containing the error message.
+  - : The string containing the error message. The empty string removes any custom validity errors.
 
 ### Return value
 

files/en-us/web/api/htmltextareaelement/setcustomvalidity/index.md

@@ -0,0 +1,65 @@
+---
+title: "HTMLTextAreaElement: setCustomValidity() method"
+short-title: setCustomValidity()
+slug: Web/API/HTMLTextAreaElement/setCustomValidity
+page-type: web-api-instance-method
+browser-compat: api.HTMLTextAreaElement.setCustomValidity
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`setCustomValidity()`** method of the {{DOMxRef("HTMLTextAreaElement")}} interface sets the custom validity message for the {{htmlelement("textarea")}} element. Use the empty string to indicate that the element does _not_ have a custom validity error.
+
+## Syntax
+
+```js-nolint
+setCustomValidity(string)
+```
+
+### Parameters
+
+- `string`
+  - : The string containing the error message. The empty string removes any custom validity errors.
+
+### Return value
+
+None ({{jsxref("undefined")}}).
+
+## Examples
+
+In this example, if the `<textarea>`'s doesn't pass constraint validation, we provide custom errors based on the constraint that is failing validation. If the value is valid, we set the custom error to an empty string:
+
+```js
+const comment = document.getElementById("comment");
+if (comment.validity.valueMissing) {
+  comment.setCustomValidity("We can't submit a blank comment!");
+} else if (comment.validity.tooShort) {
+  comment.setCustomValidity("Tell us more! Your comment is too short.");
+} else if (comment.validity.tooLong) {
+  comment.setCustomValidity(
+    "Loquacious much? Keep it to under 800 characters!",
+  );
+} else {
+  comment.setCustomValidity("");
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLelement("textarea")}}
+- {{domxref("HTMLTextAreaElement")}}
+- {{domxref("HTMLTextAreaElement.validity")}}
+- {{domxref("HTMLTextAreaElement.checkValidity()")}}
+- {{domxref("HTMLTextAreaElement.reportValidity()")}}
+- [Form validation](/en-US/docs/Web/HTML/Constraint_validation).
+- [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