HTMLInputElement: invalid event
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
若一个可提交元素在检查有效性时,不符合对它的约束条件,则会触发 invalid
事件。
冒泡 | 否 |
---|---|
可取消 | 是 |
接口 | Event |
事件处理程序属性 | GlobalEventHandlers.oninvalid |
这个事件可用于展示提交表单时所出现的问题的概览。当表单提交时,若任一表单控件无效,则会触发 invalid
事件。对可提交元素有效性的检查是在提交父元素 <form>
之前或调用父元素 <form>
或元素自己的 checkValidity()
方法之后。
这个事件不会在 blur
事件中触发。
示例
如果表单提交时有无效值,检查可提交元素时发现了错误,则 invalid
事件会在那个无效元素上触发。在这个例子中,当输入无效值触发 invalid
事件时,这个无效值被记录下来。
HTML
html
<form action="#">
<ul>
<li>
<label
>Enter an integer between 1 and 10:
<input type="number" min="1" max="10" required
/></label>
</li>
<li><input type="submit" value="submit" /></li>
</ul>
</form>
<p id="log"></p>
JavaScript
js
const input = document.querySelector("input");
const log = document.getElementById("log");
input.addEventListener("invalid", logValue);
function logValue(e) {
log.textContent += e.target.value;
}
结果
规范
Specification |
---|
HTML Standard # event-invalid |
HTML Standard # handler-oninvalid |
浏览器兼容性
BCD tables only load in the browser
参见
- HTML
<form>
元素 - 相关事件:
submit
- CSS
:invalid
伪类