如果元素的價值沒有有效性問題，則返回 true；否則返回 false。
這個牽強的例子演示瞭如何使一個按鈕無效。
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
我們添加了一些 CSS，包括按鈕的 :valid 和 :invalid 樣式。
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
我們包含了一個函式來切換示例按鈕的值、內容和驗證訊息。
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;
}
結果
該按鈕預設是有效的。啟用“THIS BUTTON”按鈕來更改其值、內容並新增自定義錯誤訊息。啟用“reportValidity()”按鈕會檢查按鈕的有效性，向用戶報告自定義錯誤訊息，並在按鈕因訊息未能透過約束驗證時觸發 invalid 事件。