HTML5未完成表单提交时，应监听哪个事件捕获用户交互？

你之前的代码没捕获到invalid事件，核心原因是：invalid事件是触发在单个表单控件（比如带required的input）上的，不是全局window或document对象。直接在全局绑定事件监听器，自然捕获不到控件触发的事件。

下面是两种可行的解决方案：

方案1：给单个必填控件绑定事件 #

直接给带required属性的输入框单独绑定invalid事件：

<form>
  <div class="group">
    <input type="text" />
    <label>Normal</label>
  </div>
  <div class="group">
    <input type="text" required id="requiredInput" />
    <label>Required</label>
  </div>
  <input type="submit" />
</form>

<script>
console.log('register event handler');

const requiredInput = document.getElementById('requiredInput');
requiredInput.addEventListener('invalid', (event) => {
  console.log('invalid事件触发', event);
  // 若要自定义错误提示，可阻止默认浏览器提示
  // event.preventDefault();
});
</script>

方案2：通过事件捕获在表单上统一监听 #

invalid事件默认不会冒泡，但可以开启事件捕获，在表单元素上监听所有子控件的无效事件，无需逐个绑定：

<form id="myForm">
  <div class="group">
    <input type="text" />
    <label>Normal</label>
  </div>
  <div class="group">
    <input type="text" required />
    <label>Required</label>
  </div>
  <input type="submit" />
</form>

<script>
console.log('register event handler');

const form = document.getElementById('myForm');
// 第三个参数设为true，开启事件捕获模式
form.addEventListener('invalid', (event) => {
  console.log('捕获到无效输入', event.target);
  // 自定义提示时阻止默认行为
  // event.preventDefault();
}, true);
</script>

注意点 #

全局的oninvalid属性无效，因为该事件属于表单控件对象，而非全局对象，必须绑定到具体控件或通过捕获绑定到父容器。

内容的提问来源于stack exchange，提问作者k0pernikus