javascript - 如果 checkValidity() 方法返回 false，则显示表单错误

Question

问题的简短版本

有没有办法用 Javascript 触发原生浏览器表单验证错误反馈？

问题的详细版本

当尝试提交具有用户未填写的必填输入字段的表单时，现代浏览器会自动处理验证，并在发现错误的输入字段处显示错误 .

每个浏览器都以自己的方式处理此问题，但为了了解一下，以下是 Edge 目前的处理方式:

我想获得相同的原生验证反馈，但不使用提交事件。

根据 HTMLSelectElement.checkValidity() 的文档, 我能够知道表单是否通过验证。

我可以使用此 true/false 信息并通过编写自定义代码来处理视觉反馈，但我想知道是否有一种方法可以触发 native 浏览器错误反馈，这样我可以节省时间。

我尝试了什么吗？

是的，我尝试使用通用提交按钮并使用阻止默认事件来执行我喜欢的操作(并且有效)，但我想知道是否有直接的方法来实现这一点，例如 HTMLSelectElement。 displayErrors() 将是逻辑。

更新

其实这个方法是存在的，它叫HTMLFormElement.reportValidity()

Answer 1

您可以通过在给定的输入字段上调用 ​​reportValidity() 来完成。

const input = document.querySelector('input');

input.addEventListener('input', (e) => {
  e.target.reportValidity();
});

<input type="email" >