HTMLInputElement: 无效事件

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

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅