检测reportValidity()当前是否在DOM元素上显示validationMessage？

Question

在

invalid

字段中调用 reportValidity() 会导致验证消息以依赖于浏览器的方式显示。

但是，再次调用

reportValidity()

会导致验证消息在 Safari 上消失，但在 Firefox 上不会消失。重复调用它会导致它切换，从而使跨浏览器验证变得困难。

在我的具体情况下，我想在表单提交和输入焦点上显示验证消息。当您提交表单且该表单无效时，该事件会在表单上触发

reportValidity()

。但是，这将聚焦无效的输入，从我的焦点事件中再次触发

reportValidity()

，隐藏刚刚显示的消息。

当您不知道消息是否已经显示时，有没有办法可靠地显示消息？浏览器是否提供接口来检测是否显示有效性消息？

示例：

const input = document.getElementById("invalid")
input.addEventListener("focus", () => input.reportValidity())
const form = document.getElementById("form")
form.addEventListener("submit", (e) => { e.preventDefault(); form.reportValidity() })

<form action="#" id="form">
  <input type="number" max="5" value="10" name="invalid" id="invalid" autocomplete="off">
  <input type="submit" value="validate">
</form>

在 Safari 上，此示例将导致提交表单时隐藏验证消息。这不是理想的行为。

Answer 1

您应该在 https://bugs.webkit.org/提交错误。

暂时的一个super-hackish解决方法是稍后以编程方式再次设置该值，然后调用

reportValidity()

。

const input = document.getElementById("invalid") 
const form = document.getElementById("form")
form.addEventListener("submit", (e) => { e.preventDefault(); input.reportValidity() })
input.addEventListener("focusin", (e) => {
  setTimeout(() => {
    input.value += "";
    input.reportValidity();
  }, 10); // 10ms based on nothing but my own test.
});

<form action="#" id="form">
  <input type="number" max="5" value="10" name="invalid" id="invalid" autocomplete="off">
  <input type="submit" value="validate">
</form>

这之所以有效，是因为……我实际上不知道。我只是在尝试很多阻止焦点之类的东西时偶然发现了这个解决方法。因此，要非常小心这个解决方法，因为它可能随时停止工作，以防它们使错误变得更严重，但是，如果他们正确修复了错误，那应该仍然有效。