在模糊上显示浏览器表单错误消息

Question

当所需的表单输入为空或无效时，大多数浏览器都会显示默认错误消息（Safari是值得注意的例外）。我喜欢这些消息的样式，所以我很乐意显示浏览器默认值，而不是创建自己的消息。 这些默认消息有三种显示方式：

• 用户尝试提交表单
• 您以编程方式单击表单
的提交按钮
• 您使用reportValidity()

关于模糊的

reportValidity()很容易：

var form = document.forms[0];
var inputs = form.querySelectorAll("input");

inputs.forEach((input) => input.addEventListener("blur", function() {
    input.reportValidity();
}))

reportValidity()的行为因浏览器而异。 Chrome显示错误消息，但也具有令人难以置信的非用户友好效果，即将光标捕获在错误的输入元素内 - 单击另一个输入或使用Tab键无效，这是一种糟糕的用户体验。 Chrome还会在源订单中显示最早的无效输入字段的错误消息。 Firefox（在Nightly上测试）具有显示仅相关输入的错误消息的所需行为，并且不会捕获用户光标。

有没有办法显示发生模糊事件的输入字段的错误消息（在所有具有默认错误消息的浏览器上）？