From 89d17a618d9a09519b1a667ecab74c4c40515e8f Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Fri, 30 Aug 2024 09:47:29 -0700 Subject: [PATCH] New pages: missing checkvalidity() and reportvalidity() API method pages (#35546) --- .../htmlbuttonelement/checkvalidity/index.md | 54 +++++++ .../htmlbuttonelement/reportvalidity/index.md | 140 ++++++++++++++++++ .../checkvalidity/index.md | 50 +++++++ .../reportvalidity/index.md | 41 +++++ .../htmlformelement/checkvalidity/index.md | 49 ++++++ .../htmlformelement/reportvalidity/index.md | 19 ++- .../htmlinputelement/checkvalidity/index.md | 55 ++++++- .../htmlinputelement/reportvalidity/index.md | 135 ++++++++++++++++- .../htmlobjectelement/checkvalidity/index.md | 23 ++- .../htmlobjectelement/reportvalidity/index.md | 41 +++++ .../htmloutputelement/checkvalidity/index.md | 50 +++++++ .../htmloutputelement/reportvalidity/index.md | 41 +++++ .../htmlselectelement/checkvalidity/index.md | 28 +++- .../htmlselectelement/reportvalidity/index.md | 42 ++++++ .../checkvalidity/index.md | 54 +++++++ .../reportvalidity/index.md | 42 ++++++ 16 files changed, 840 insertions(+), 24 deletions(-) create mode 100644 files/en-us/web/api/htmlbuttonelement/checkvalidity/index.md create mode 100644 files/en-us/web/api/htmlbuttonelement/reportvalidity/index.md create mode 100644 files/en-us/web/api/htmlfieldsetelement/checkvalidity/index.md create mode 100644 files/en-us/web/api/htmlfieldsetelement/reportvalidity/index.md create mode 100644 files/en-us/web/api/htmlformelement/checkvalidity/index.md create mode 100644 files/en-us/web/api/htmlobjectelement/reportvalidity/index.md create mode 100644 files/en-us/web/api/htmloutputelement/checkvalidity/index.md create mode 100644 files/en-us/web/api/htmloutputelement/reportvalidity/index.md create mode 100644 files/en-us/web/api/htmlselectelement/reportvalidity/index.md create mode 100644 files/en-us/web/api/htmltextareaelement/checkvalidity/index.md create mode 100644 files/en-us/web/api/htmltextareaelement/reportvalidity/index.md diff --git a/files/en-us/web/api/htmlbuttonelement/checkvalidity/index.md b/files/en-us/web/api/htmlbuttonelement/checkvalidity/index.md new file mode 100644 index 000000000000000..c95b268c0201dcd --- /dev/null +++ b/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 diff --git a/files/en-us/web/api/htmlbuttonelement/reportvalidity/index.md b/files/en-us/web/api/htmlbuttonelement/reportvalidity/index.md new file mode 100644 index 000000000000000..c17d2992f5e7c64 --- /dev/null +++ b/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 +
+

+ + +

+

+ +

+
+ +

+``` + +#### 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}
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}
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 diff --git a/files/en-us/web/api/htmlfieldsetelement/checkvalidity/index.md b/files/en-us/web/api/htmlfieldsetelement/checkvalidity/index.md new file mode 100644 index 000000000000000..ef87460610172ad --- /dev/null +++ b/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) diff --git a/files/en-us/web/api/htmlfieldsetelement/reportvalidity/index.md b/files/en-us/web/api/htmlfieldsetelement/reportvalidity/index.md new file mode 100644 index 000000000000000..8a5c5ae43c5ff06 --- /dev/null +++ b/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) diff --git a/files/en-us/web/api/htmlformelement/checkvalidity/index.md b/files/en-us/web/api/htmlformelement/checkvalidity/index.md new file mode 100644 index 000000000000000..57571d47d7f628f --- /dev/null +++ b/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) diff --git a/files/en-us/web/api/htmlformelement/reportvalidity/index.md b/files/en-us/web/api/htmlformelement/reportvalidity/index.md index 3fcd4fe7e91fdea..9855cc681be6cad 100644 --- a/files/en-us/web/api/htmlformelement/reportvalidity/index.md +++ b/files/en-us/web/api/htmlformelement/reportvalidity/index.md @@ -8,11 +8,7 @@ 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 @@ -20,9 +16,13 @@ each invalid child and validation problems are reported to the user. 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) diff --git a/files/en-us/web/api/htmlinputelement/checkvalidity/index.md b/files/en-us/web/api/htmlinputelement/checkvalidity/index.md index f9b757cd834891d..d7f4cff88bb1aba 100644 --- a/files/en-us/web/api/htmlinputelement/checkvalidity/index.md +++ b/files/en-us/web/api/htmlinputelement/checkvalidity/index.md @@ -8,7 +8,10 @@ browser-compat: api.HTMLInputElement.checkValidity {{APIRef("HTML DOM")}} -The **`HTMLInputElement.checkValidity()`** method returns a boolean value which indicates validity of the value of the element. If the value is invalid, this method also fires the {{domxref("HTMLInputElement/invalid_event", "invalid")}} event on the element. +The **`checkValidity()`** method of the {{domxref("HTMLInputElement")}} 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("input")}} element with a non-null {{domxref("HTMLInputElement.validationMessage", "validationMessage")}} is considered invalid, will match the CSS {{cssxref(":invalid")}} pseudo-class, and will cause `checkValidity()` to return false. Use the {{domxref("HTMLInputElement.setCustomValidity()")}} method to set the {{domxref("HTMLInputElement.validationMessage")}} to the empty string to set the {{domxref("HTMLInputElement.validity", "validity")}} state to be valid. ## Syntax @@ -22,7 +25,50 @@ None. ### Return value -Returns `true` if the value of the element has no validity problems; otherwise returns `false`. +Returns `true` if the element's value has no validity problems; otherwise, returns `false`. + +## Examples + +### HTML + +We include a form containing a required number field and two buttons: one to check the form and the other to submit it. + +```html +
+

+ + +

+

+ + +

+

+
+``` + +### JavaScript + +```js +const output = document.querySelector("#log"); +const checkButton = document.querySelector("#check"); +const ageInput = document.querySelector("#age"); + +ageInput.addEventListener("invalid", () => { + console.log("Invalid event fired."); +}); + +checkButton.addEventListener("click", () => { + const checkVal = ageInput.checkValidity(); + output.innerHTML = `checkValidity returned: ${checkVal}`; +}); +``` + +### Results + +{{EmbedLiveSample("Examples", "100%", 220)}} + +When `false`, if the value is missing, below 21, above 65, or othewise invalid, the invalid event will be logged to the console. To report the error to the user, use {{domxref("HTMLInputElement.reportValidity()")}} instead. ## Specifications @@ -34,6 +80,9 @@ Returns `true` if the value of the element has no validity problems; otherwise r ## See also -- [reportValidity](/en-US/docs/Web/API/HTMLInputElement/reportValidity) +- {{domxref("HTMLInputElement.reportValidity()")}} +- {{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) +- CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} pseudo-classes diff --git a/files/en-us/web/api/htmlinputelement/reportvalidity/index.md b/files/en-us/web/api/htmlinputelement/reportvalidity/index.md index e3e5d3a7a60138b..40cbdf0b9c23ec3 100644 --- a/files/en-us/web/api/htmlinputelement/reportvalidity/index.md +++ b/files/en-us/web/api/htmlinputelement/reportvalidity/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLInputElement.reportValidity {{APIRef("HTML DOM")}} -The **`reportValidity()`** method of the {{domxref('HTMLInputElement')}} interface performs the same validity checking steps as the {{domxref("HTMLInputElement.checkValidity", "checkValidity()")}} method. If the value is invalid, this method also fires the {{domxref("HTMLInputElement.invalid_event", "invalid")}} event on the element, and (if the event isn't canceled) reports the problem to the user. +The **`reportValidity()`** method of the {{domxref("HTMLInputElement")}} interface performs the same validity checking steps as the {{domxref("HTMLInputElement.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 @@ -24,6 +24,134 @@ None. Returns `true` if the element's value has no validity problems; otherwise, returns `false`. +## Examples + +### Basic usage + +#### HTML + +We include a form containing a required number field and two buttons: one to check the form and the other to submit it. + +```html +
+

+ + +

+

+ + +

+

+
+``` + +#### JavaScript + +When the "reportValidity()" button is activated, we use the `reportValidity()` method to check if the input's value meets its constraints. We log the return value. If `false`, we also display the validation message and capture the `invalid` event. + +```js +const output = document.querySelector("#log"); +const reportButton = document.querySelector("#report"); +const ageInput = document.querySelector("#age"); + +ageInput.addEventListener("invalid", () => { + console.log("Invalid event fired."); +}); + +reportButton.addEventListener("click", () => { + const reportVal = ageInput.reportValidity(); + output.innerHTML = `"reportValidity()" returned: ${reportVal}`; + if (!reportVal) { + output.innerHTML += `
Validation message: "${ageInput.validationMessage}"`; + } +}); +``` + +#### Results + +{{EmbedLiveSample("Basic usage", "100%", 120)}} + +When `false`, if the value is missing, is below 21, is above 65, or is othewise invalid, an error message appears, an invalid event is fired, and we log that invalid event to the console. + +### Custom error message + +This example demonstrates how a custom error message can cause a `false` return value when the value is otherwise valid. + +#### HTML + +We add a "Fix me" button to the HTML from the previous example. + +```html hidden +
+

+ + +

+

+ + +

+
+``` + +```html + +``` + +```html hidden +

+

+ +``` + +#### JavaScript + +We expand on the JavaScript from the basic example above, adding a function that used the {{domxref("HTMLInputElement.setCustomValidity()")}} method to provide custom error messages. The `validateAge()` function only sets the error message to an empty string if the input is valid AND the `enableValidation` variable is `true`, with `enableValidation` being `false` until the "fix issues" button has been activated. + +```javascript +const output = document.querySelector("#log"); +const reportButton = document.querySelector("#report"); +const ageInput = document.querySelector("#age"); +const fixButton = document.querySelector("#fix"); +let enableValidation = false; + +fixButton.addEventListener("click", (e) => { + enableValidation = true; + fixButton.innerHTML = "Error fixed"; + fixButton.disabled = true; +}); + +reportButton.addEventListener("click", () => { + validateAge(); + const reportVal = ageInput.reportValidity(); + output.innerHTML = `"reportValidity()" returned: ${reportVal}`; + if (!reportVal) { + output.innerHTML += `
Validation message: "${ageInput.validationMessage}"`; + } +}); + +const validateAge = () => { + const validityState_object = ageInput.validity; + if (validityState_object.valueMissing) { + ageInput.setCustomValidity("Please set an age (required)"); + } else if (ageInput.rangeUnderflow) { + ageInput.setCustomValidity("Your value is too low"); + } else if (ageInput.rangeOverflow) { + ageInput.setCustomValidity("Your value is too high"); + } else if (enableValidation) { + // sets to empty string if valid AND enableValidation has been set to true + ageInput.setCustomValidity(""); + } +}; +``` + +#### Results + +{{EmbedLiveSample("Custom error message", "100%", 120)}} + +If you activate the "reportValidity()" button before entering an age, the `reportValidity()` method returns `false` because it does not meet `required` constraint validation. This method fires an `invalid` event on the input and reports the problem to the user, displaying the custom error message "Please set an age (required)". As long as a custom error message is set, activating the "reportValidity()" button will continue to display an error even if you select a valid age. To enable validation, we have to set the custom error message to the empty string, which is done by clicking the "Fix issues" button. + ## Specifications {{Specifications}} @@ -34,6 +162,9 @@ Returns `true` if the element's value has no validity problems; otherwise, retur ## See also -- [checkValidity](/en-US/docs/Web/API/HTMLInputElement/checkValidity) +- {{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) +- CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} pseudo-classes diff --git a/files/en-us/web/api/htmlobjectelement/checkvalidity/index.md b/files/en-us/web/api/htmlobjectelement/checkvalidity/index.md index 70236155fa822bd..05b748b6197e5f8 100644 --- a/files/en-us/web/api/htmlobjectelement/checkvalidity/index.md +++ b/files/en-us/web/api/htmlobjectelement/checkvalidity/index.md @@ -8,9 +8,7 @@ browser-compat: api.HTMLObjectElement.checkValidity {{APIRef("HTML DOM")}} -The **`checkValidity()`** method of the -{{domxref("HTMLObjectElement")}} interface returns a boolean value that always -is true, because object objects are never candidates for constraint validation. +The **`checkValidity()`** method of the {{domxref("HTMLObjectElement")}} interface checks if the element is valid, but always returns true because {{HTMLElement("object")}} elements are never candidates for [constraint validation](/en-US/docs/Web/HTML/Constraint_validation) . ## Syntax @@ -24,11 +22,16 @@ None. ### Return value -`true` +A boolean value, `true`. -### Exceptions +## Examples -None. +In the following example, calling `checkValidity()` returns `true`. + +```js +const element = document.getElementById("myObjectElement"); +console.log(element.checkValidity()); +``` ## Specifications @@ -37,3 +40,11 @@ None. ## Browser compatibility {{Compat}} + +## See also + +- {{domxref("HTMLObjectElement.reportValidity()")}} +- {{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/htmlobjectelement/reportvalidity/index.md b/files/en-us/web/api/htmlobjectelement/reportvalidity/index.md new file mode 100644 index 000000000000000..fe19297d079b6c1 --- /dev/null +++ b/files/en-us/web/api/htmlobjectelement/reportvalidity/index.md @@ -0,0 +1,41 @@ +--- +title: "HTMLObjectElement: reportValidity() method" +short-title: reportValidity() +slug: Web/API/HTMLObjectElement/reportValidity +page-type: web-api-instance-method +browser-compat: api.HTMLObjectElement.reportValidity +--- + +{{APIRef("HTML DOM")}} + +The **`reportValidity()`** method of the {{domxref("HTMLObjectElement")}} interface performs the same validity checking steps as the {{domxref("HTMLObjectElement.checkValidity", "checkValidity()")}} method. It always returns true because {{HTMLElement("object")}} 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("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/checkvalidity/index.md b/files/en-us/web/api/htmloutputelement/checkvalidity/index.md new file mode 100644 index 000000000000000..a9d1d4653856348 --- /dev/null +++ b/files/en-us/web/api/htmloutputelement/checkvalidity/index.md @@ -0,0 +1,50 @@ +--- +title: "HTMLOutputElement: checkValidity() method" +short-title: checkValidity() +slug: Web/API/HTMLOutputElement/checkValidity +page-type: web-api-instance-method +browser-compat: api.HTMLOutputElement.checkValidity +--- + +{{APIRef("HTML DOM")}} + +The **`checkValidity()`** method of the {{domxref("HTMLOutputElement")}} interface checks if the element is valid, but always returns true because {{HTMLElement("output")}} 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("myOutput"); +console.log(element.checkValidity()); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLOutputElement.reportValidity()")}} +- {{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/htmloutputelement/reportvalidity/index.md b/files/en-us/web/api/htmloutputelement/reportvalidity/index.md new file mode 100644 index 000000000000000..f2eaca3714d5852 --- /dev/null +++ b/files/en-us/web/api/htmloutputelement/reportvalidity/index.md @@ -0,0 +1,41 @@ +--- +title: "HTMLOutputElement: reportValidity() method" +short-title: reportValidity() +slug: Web/API/HTMLOutputElement/reportValidity +page-type: web-api-instance-method +browser-compat: api.HTMLOutputElement.reportValidity +--- + +{{APIRef("HTML DOM")}} + +The **`reportValidity()`** method of the {{domxref("HTMLOutputElement")}} interface performs the same validity checking steps as the {{domxref("HTMLOutputElement.checkValidity", "checkValidity()")}} method. It always returns true because {{HTMLElement("output")}} 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("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/checkvalidity/index.md b/files/en-us/web/api/htmlselectelement/checkvalidity/index.md index 2213493c41d9e34..6e2003c5fec569c 100644 --- a/files/en-us/web/api/htmlselectelement/checkvalidity/index.md +++ b/files/en-us/web/api/htmlselectelement/checkvalidity/index.md @@ -6,12 +6,12 @@ page-type: web-api-instance-method browser-compat: api.HTMLSelectElement.checkValidity --- -{{ APIRef("HTML DOM") }} +{{APIRef("HTML DOM")}} -The **`HTMLSelectElement.checkValidity()`** method checks -whether the element has any constraints and whether it satisfies them. If the element -fails its constraints, the browser fires a cancelable {{domxref("HTMLSelectElement/invalid_event", "invalid")}} event at the -element, and then returns `false`. +The **`checkValidity()`** method of the {{domxref("HTMLSelectElement")}} 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("select")}} element with a non-null {{domxref("HTMLSelectElement.validationMessage", "validationMessage")}} is considered invalid, will match the CSS {{cssxref(":invalid")}} pseudo-class, and will cause `checkValidity()` to return false. Use the {{domxref("HTMLSelectElement.setCustomValidity()")}} method to set the {{domxref("HTMLSelectElement.validationMessage")}} to the empty string to set the {{domxref("HTMLSelectElement.validity", "validity")}} state to be valid. ## Syntax @@ -25,7 +25,16 @@ None. ### Return value -Returns `true` if the value of the element has no validity problems; otherwise returns `false`. +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("mySelect"); +console.log(element.checkValidity()); +``` ## Specifications @@ -37,4 +46,9 @@ Returns `true` if the value of the element has no validity problems; otherwise r ## See also -- [Constraint validation](/en-US/docs/Web/HTML/Constraint_validation) +- {{domxref("HTMLTextAreaElement.reportValidity()")}} +- {{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) +- CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} pseudo-classes diff --git a/files/en-us/web/api/htmlselectelement/reportvalidity/index.md b/files/en-us/web/api/htmlselectelement/reportvalidity/index.md new file mode 100644 index 000000000000000..aed341b0d9ebd32 --- /dev/null +++ b/files/en-us/web/api/htmlselectelement/reportvalidity/index.md @@ -0,0 +1,42 @@ +--- +title: "HTMLSelectElement: reportValidity() method" +short-title: reportValidity() +slug: Web/API/HTMLSelectElement/reportValidity +page-type: web-api-instance-method +browser-compat: api.HTMLSelectElement.reportValidity +--- + +{{APIRef("HTML DOM")}} + +The **`reportValidity()`** method of the {{domxref("HTMLSelectElement")}} interface performs the same validity checking steps as the {{domxref("HTMLSelectElement.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`. + +## 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) +- CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} pseudo-classes diff --git a/files/en-us/web/api/htmltextareaelement/checkvalidity/index.md b/files/en-us/web/api/htmltextareaelement/checkvalidity/index.md new file mode 100644 index 000000000000000..7120a17918ffc10 --- /dev/null +++ b/files/en-us/web/api/htmltextareaelement/checkvalidity/index.md @@ -0,0 +1,54 @@ +--- +title: "HTMLTextAreaElement: checkValidity() method" +short-title: checkValidity() +slug: Web/API/HTMLTextAreaElement/checkValidity +page-type: web-api-instance-method +browser-compat: api.HTMLTextAreaElement.checkValidity +--- + +{{APIRef("HTML DOM")}} + +The **`checkValidity()`** method of the {{domxref("HTMLTextAreaElement")}} 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("textarea")}} element with a non-null {{domxref("HTMLTextAreaElement.validationMessage", "validationMessage")}} is considered invalid, will match the CSS {{cssxref(":invalid")}} pseudo-class, and will cause `checkValidity()` to return false. Use the {{domxref("HTMLTextAreaElement.setCustomValidity()")}} method to set the {{domxref("HTMLTextAreaElement.validationMessage")}} to the empty string to set the {{domxref("HTMLTextAreaElement.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("myTextArea"); +console.log(element.checkValidity()); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLTextAreaElement.reportValidity()")}} +- {{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) +- CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} pseudo-classes diff --git a/files/en-us/web/api/htmltextareaelement/reportvalidity/index.md b/files/en-us/web/api/htmltextareaelement/reportvalidity/index.md new file mode 100644 index 000000000000000..5ff6877ff31fd6b --- /dev/null +++ b/files/en-us/web/api/htmltextareaelement/reportvalidity/index.md @@ -0,0 +1,42 @@ +--- +title: "HTMLTextAreaElement: reportValidity() method" +short-title: reportValidity() +slug: Web/API/HTMLTextAreaElement/reportValidity +page-type: web-api-instance-method +browser-compat: api.HTMLTextAreaElement.reportValidity +--- + +{{APIRef("HTML DOM")}} + +The **`reportValidity()`** method of the {{domxref("HTMLTextAreaElement")}} interface performs the same validity checking steps as the {{domxref("HTMLTextAreaElement.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`. + +## 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) +- CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} pseudo-classes