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

Question

简短版问题

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

详细版问题

当尝试提交一个包含必填输入字段但用户未填写的表单时，现代浏览器会自动处理验证，并在发现错误的输入字段上显示一个错误。

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

我想实现相同的本地验证反馈，但不使用提交事件。

根据HTMLSelectElement.checkValidity()的文档，我可以知道表单是否验证或不验证。

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

我尝试过什么？

是的，我尝试了使用常见的提交按钮，并使用prevent default事件来做我喜欢的事情（它有效），但我想知道是否有一种直接的方法可以实现这一点，类似于HTMLSelectElement.displayErrors()会很合理。

更新

事实上，该方法确实存在，它被称为HTMLFormElement.reportValidity()

- Álvaro Franz

Answer 1

你可以通过在给定的输入字段上调用reportValidity()来实现。

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

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

<input type="email" >

- Emil Dimitrov

Answer 2

感谢Emil的回答，我按照自己想要的方式解决了问题。

我将其留在这里供更多读者参考，但接受Emil的答案，因为那是关键部分。

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

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...

}

- Álvaro Franz