Skip to content

Commit 8962001

Browse files
Josh-CenaJosh-Cena
committed
New pages for HTML*Element.validity
1 parent 38cdfef commit 8962001

File tree

8 files changed

+239
-3
lines changed

8 files changed

+239
-3
lines changed

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: "HTMLButtonElement: validity property"
3+
short-title: validity
4+
slug: Web/API/HTMLButtonElement/validity
5+
page-type: web-api-instance-property
6+
browser-compat: api.HTMLButtonElement.validity
7+
---
8+
9+
{{APIRef("HTML DOM")}}
10+
11+
The **`validity`** read-only property of the {{domxref("HTMLButtonElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in.
12+
13+
## Value
14+
15+
A {{domxref("ValidityState")}} object.
16+
17+
## Examples
18+
19+
The following example gets the validity state of a button element and processes it if it is not valid:
20+
21+
```js
22+
const button = document.getElementById("myButton");
23+
if (!button.validity.valid) {
24+
// Test each validity state
25+
}
26+
```
27+
28+
## Specifications
29+
30+
{{Specifications}}
31+
32+
## Browser compatibility
33+
34+
{{Compat}}
35+
36+
## See also
37+
38+
- {{domxref("HTMLButtonElement.checkValidity()")}}
39+
- {{HTMLElement("button")}}
40+
- {{HTMLElement("form")}}
41+
- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation)
42+
- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation)

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ browser-compat: api.HTMLFieldSetElement.checkValidity
1010

1111
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) .
1212

13+
> [!NOTE]
14+
> 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.
15+
1316
## Syntax
1417

1518
```js-nolint

‎files/en-us/web/api/htmlfieldsetelement/validity/index.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
title: "HTMLFieldSetElement: validity property"
3+
short-title: validity
4+
slug: Web/API/HTMLFieldSetElement/validity
5+
page-type: web-api-instance-property
6+
browser-compat: api.HTMLFieldSetElement.validity
7+
---
8+
9+
{{APIRef("HTML DOM")}}
10+
11+
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.
12+
13+
> [!NOTE]
14+
> 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.
15+
16+
## Value
17+
18+
A {{domxref("ValidityState")}} object.
19+
20+
## Examples
21+
22+
The following example shows how you can have a `<fieldset>` in an invalid state, even when {{domxref("HTMLFieldSetElement/checkValidity", "checkValidity()")}} returns `true`.
23+
24+
```js
25+
const fieldSet = document.getElementById("myFieldSet");
26+
fieldSet.setCustomValidity("This fieldset is invalid.");
27+
console.log(fieldSet.validity.valid); // false
28+
console.log(fieldSet.validity.checkValidity()); // true
29+
```
30+
31+
## Specifications
32+
33+
{{Specifications}}
34+
35+
## Browser compatibility
36+
37+
{{Compat}}
38+
39+
## See also
40+
41+
- {{domxref("HTMLFieldSetElement.checkValidity()")}}
42+
- {{HTMLElement("fieldset")}}
43+
- {{HTMLElement("form")}}
44+
- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation)
45+
- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation)

‎files/en-us/web/api/htmlformelement/checkvalidity/index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ browser-compat: api.HTMLFormElement.checkValidity
1010

1111
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.
1212

13+
> [!NOTE]
14+
> 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.
15+
1316
## Syntax
1417

1518
```js-nolint

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

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,35 @@ browser-compat: api.HTMLObjectElement.validity
88

99
{{APIRef("HTML DOM")}}
1010

11-
The **`validity`** read-only property of the
12-
{{domxref("HTMLObjectElement")}} interface returns a {{domxref("ValidityState")}} with
13-
the validity states that this element is in.
11+
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.
1412

1513
## Value
1614

1715
A {{domxref("ValidityState")}} object.
1816

17+
## Examples
18+
19+
The following example shows how you can have an `<object>` in an invalid state, even when {{domxref("HTMLObjectElement/checkValidity", "checkValidity()")}} returns `true`.
20+
21+
```js
22+
const object = document.getElementById("myObjectElement");
23+
object.setCustomValidity("This object is invalid.");
24+
console.log(object.validity.valid); // false
25+
console.log(object.validity.checkValidity()); // true
26+
```
27+
1928
## Specifications
2029

2130
{{Specifications}}
2231

2332
## Browser compatibility
2433

2534
{{Compat}}
35+
36+
## See also
37+
38+
- {{domxref("HTMLObjectElement.checkValidity()")}}
39+
- {{HTMLElement("object")}}
40+
- {{HTMLElement("form")}}
41+
- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation)
42+
- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation)

‎files/en-us/web/api/htmloutputelement/validity/index.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: "HTMLOutputElement: validity property"
3+
short-title: validity
4+
slug: Web/API/HTMLOutputElement/validity
5+
page-type: web-api-instance-property
6+
browser-compat: api.HTMLOutputElement.validity
7+
---
8+
9+
{{APIRef("HTML DOM")}}
10+
11+
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.
12+
13+
## Value
14+
15+
A {{domxref("ValidityState")}} object.
16+
17+
## Examples
18+
19+
The following example shows how you can have a `<output>` in an invalid state, even when {{domxref("HTMLOutputElement/checkValidity", "checkValidity()")}} returns `true`.
20+
21+
```js
22+
const output = document.getElementById("myOutput");
23+
output.setCustomValidity("This output is invalid.");
24+
console.log(output.validity.valid); // false
25+
console.log(output.validity.checkValidity()); // true
26+
```
27+
28+
## Specifications
29+
30+
{{Specifications}}
31+
32+
## Browser compatibility
33+
34+
{{Compat}}
35+
36+
## See also
37+
38+
- {{domxref("HTMLOutputElement.checkValidity()")}}
39+
- {{HTMLElement("output")}}
40+
- {{HTMLElement("form")}}
41+
- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation)
42+
- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation)

‎files/en-us/web/api/htmlselectelement/validity/index.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: "HTMLSelectElement: validity property"
3+
short-title: validity
4+
slug: Web/API/HTMLSelectElement/validity
5+
page-type: web-api-instance-property
6+
browser-compat: api.HTMLSelectElement.validity
7+
---
8+
9+
{{APIRef("HTML DOM")}}
10+
11+
The **`validity`** read-only property of the {{domxref("HTMLSelectElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in.
12+
13+
## Value
14+
15+
A {{domxref("ValidityState")}} object.
16+
17+
## Example
18+
19+
The following example gets the validity state of a select element and processes it if it is not valid:
20+
21+
```js
22+
const select = document.getElementById("mySelect");
23+
if (!select.validity.valid) {
24+
// Test each validity state
25+
}
26+
```
27+
28+
## Specifications
29+
30+
{{Specifications}}
31+
32+
## Browser compatibility
33+
34+
{{Compat}}
35+
36+
## See also
37+
38+
- {{domxref("HTMLSelectElement.checkValidity()")}}
39+
- {{HTMLElement("select")}}
40+
- {{HTMLElement("form")}}
41+
- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation)
42+
- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation)

‎files/en-us/web/api/htmltextareaelement/validity/index.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: "HTMLTextAreaElement: validity property"
3+
short-title: validity
4+
slug: Web/API/HTMLTextAreaElement/validity
5+
page-type: web-api-instance-property
6+
browser-compat: api.HTMLTextAreaElement.validity
7+
---
8+
9+
{{APIRef("HTML DOM")}}
10+
11+
The **`validity`** read-only property of the {{domxref("HTMLTextAreaElement")}} interface returns a {{domxref("ValidityState")}} with the validity states that this element is in.
12+
13+
## Value
14+
15+
A {{domxref("ValidityState")}} object.
16+
17+
## Examples
18+
19+
The following example gets the validity state of a text area element and processes it if it is not valid:
20+
21+
```js
22+
const textArea = document.getElementById("myTextArea");
23+
if (!textArea.validity.valid) {
24+
// Test each validity state
25+
}
26+
```
27+
28+
## Specifications
29+
30+
{{Specifications}}
31+
32+
## Browser compatibility
33+
34+
{{Compat}}
35+
36+
## See also
37+
38+
- {{domxref("HTMLTextAreaElement.checkValidity()")}}
39+
- {{HTMLElement("textarea")}}
40+
- {{HTMLElement("form")}}
41+
- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation)
42+
- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation)

0 commit comments

Comments
 (0)