Repository navigation
Expand file tree
/
Copy pathindex.md
More file actions
140 lines (106 loc) · 4.06 KB
/
Copy pathindex.md
File metadata and controls
140 lines (106 loc) · 4.06 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
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. It always returns true if the {{HTMLElement("button")}} element is not a candidate for [constraint validation](/en-US/docs/Web/HTML/Guides/Constraint_validation) (its {{domxref("HTMLButtonElement/willValidate", "willValidate")}} is `false`).
## Syntax
```js-nolint
reportValidity()
```
### Parameters
None.
### Return value
Returns `true` if the element's value has no validity problems or if it's not a candidate for constraint validation; 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: #3333aa;
border: none;
font-size: 1.3rem;
padding: 5px 10px;
color: white;
}
button:invalid {
background-color: #aa3333;
}
button:valid {
background-color: #33aa33;
}
```
#### 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}`;
});
function breakOrFixButton() {
const state = toggleButton();
if (state === "error") {
exampleButton.setCustomValidity("This is a custom error message");
} else {
exampleButton.setCustomValidity("");
}
}
function 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 constraint 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_web_development/Extensions/Forms/Form_validation)
- [Guide: Constraint validation](/en-US/docs/Web/HTML/Guides/Constraint_validation)
- CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} pseudo-classes