收听 'onInvalid' <form>HTML 事件

Question

当用户尝试提交<表单>存在验证错误。

有没有一种方法可以以可靠和方便的方式做到这一点？

我考虑过的解决方案(没有一个是好的(：

1. 向<表单>。

   这不起作用，因为只有有效表单才会触发"submit"。

2. "无效"事件由HTML<输入>当用户尝试提交表格。

   事件没有气泡，所以我不能这样听：form.addEventListener('invalid', callback);

   因此，侦听"invalid"事件需要为每个<输入>在创建该字段时在表单内部。很容易忘记向字段添加事件侦听器，因为字段是在许多不同的.js和.tsx文件中动态创建的，因此这种解决方案很容易出错，而且远非理想。

3. 在提交按钮和回调中侦听"点击"事件，检查form.checkValidity()是否为false。

   这种解决方案也不理想，因为屏幕阅读器软件和其他辅助技术在尝试提交表单时不一定会触发"点击"事件。

有什么好方法可以知道用户是否试图提交无效表单吗？

我对涉及React、jQuery或原生JavaScript的解决方案很满意。

---

如果这个问题没有好处，请考虑我的用例，并告知是否有替代方法：

我只需要在用户尝试提交表单后向无效表单字段添加样式。

Answer 1

您现在可能已经解决了这个问题，但您可以在捕获阶段侦听事件：

form.addEventListener('invalid', callback,true);