A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLInputElement/invalid_event below:

HTMLInputElement: invalid event - Web API

HTMLInputElement: invalid event

Baseline Widely available

若一个可提交元素在检查有效性时,不符合对它的约束条件,则会触发 invalid 事件。

这个事件可用于展示提交表单时所出现的问题的概览。当表单提交时,若任一表单控件无效,则会触发 invalid 事件。对可提交元素有效性的检查是在提交父元素 <form> 之前或调用父元素 <form> 或元素自己的 checkValidity() 方法之后。

这个事件不会在 blur 事件中触发。

示例

如果表单提交时有无效值,检查可提交元素时发现了错误,则 invalid 事件会在那个无效元素上触发。在这个例子中,当输入无效值触发 invalid 事件时,这个无效值被记录下来。

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
const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("invalid", logValue);

function logValue(e) {
  log.textContent += e.target.value;
}
结果 规范 浏览器兼容性 参见

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4