HTMLInputElement: invalid 事件
當一個可提交元素經過有效性檢查但未能滿足其約束條件時，會觸發 invalid 事件。
此事件可用於在表單提交時顯示錶單問題的摘要。當表單提交時，invalid 事件會在每個無效的表單控制元件上觸發。在提交其所屬的 <form> 元素之前，或者在呼叫元素或其所屬 <form> 元素的 checkValidity() 方法之後，會檢查可提交元素的有效性。
在 blur 時不會檢查。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("invalid", (event) => { })
oninvalid = (event) => { }
事件型別
一個通用的 Event。
示例
如果表單以無效值提交，則會檢查可提交元素，如果發現錯誤，invalid 事件將在 invalid 元素上觸發。在此示例中，當由於輸入中的無效值而觸發無效事件時，將記錄該無效值。
HTML
html
<form action="#">
<div>
<label>
Enter an integer between 1 and 10:
<input type="number" min="1" max="10" required />
</label>
</div>
<div><input type="submit" value="submit" /></div>
</form>
<hr />
Invalid values:
<ul id="log"></ul>
JavaScript
js
const input = document.querySelector("input");
const log = document.getElementById("log");
input.addEventListener("invalid", (e) => {
log.appendChild(document.createElement("li")).textContent = JSON.stringify(
e.target.value,
);
});
結果
規範
| 規範 |
|---|
| HTML # event-invalid |
| HTML # handler-oninvalid |
瀏覽器相容性
載入中…