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 |
浏览器兼容性
加载中…