如果 checkValidity() 方法 returns false 则显示表单错误

Question

问题的简短版本

有没有办法通过 Javascript 触发本机浏览器表单验证错误反馈？

问题详细版

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

每个浏览器都以自己的方式处理此问题，但为了了解一下，以下是 Edge 今天的做法：

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

根据 HTMLSelectElement.checkValidity() 的文档，我可以知道表单是否有效。

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

我尝试了什么吗？

是的，我尝试使用一个通用的提交按钮并使用阻止默认事件来做我喜欢的事情（并且有效），但我想知道是否有直接的方法来实现这一点，比如 HTMLSelectElement.displayErrors() 是合乎逻辑的。

更新

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

Answer 1

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

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

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

<input type="email" >

Answer 2

感谢 Emil 的回答，我让它按照我想要的方式工作。

我将它留给更多的读者，但接受 Emil 的回答，因为那是关键部分。

根据文档，您可以在表单本身上运行 checkValidity() method，不一定在子输入上。

function processForm(){

    // Early return form processing if validation errors where found
    if(!document.getElementById('form-id').checkValidity()){
        document.getElementById('form-id').reportValidity();
        return false;
    }

    // Okay, all cool, do stuff...

}

如果 checkValidity() 方法 returns false 则显示表单错误

Display form errors if the checkValidity() method returns false

html

javascript

validation