javascript - 当我想仅显示一个输入字段的错误气泡时，如何正确使用 reportValidity()？

Question

我想在给定表单上的数十个输入字段中的一个上验证并显示错误气泡。每个输入字段都有自己的必需属性和模式属性集，以及验证 onBlur 上输入的函数。

为此，我在 onBlur 上调用一个函数来进行验证，使用 setCustomValidity() 设置自定义错误消息，然后调用 reportValidity() 在表单元素上显示气泡上的自定义消息...这验证了我的第一个字段，但是当我 onBlur 第一个字段并且它有效时，下一个输入字段显示错误气泡。

我知道我的问题是 reportValidity() 验证整个表单，并且空的必填字段确实无效...但是我如何强制它仅在我的字段上显示错误气泡要走了吗？我很难弄清楚这一点。

需要澄清的是，这就是我所说的错误气泡。我不知道它的技术名称(我想知道它!)

Answer 1

而不是在 HTMLFormElement 上调用 reportValidity() ，您可以对每个 HTMLInputElement 调用 reportValidity() .

下面的示例显示了两个必需的 HTMLInputElement，第二个已验证。

document.getElementById("2")
  .reportValidity();

<form>
  <input id="1" required>
  <input id="2" required>
</form>