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

参见