javascript 如何使用css删除.reportValidity()后的标准验证工具提示

iqjalb3h  于 2023-02-28  发布在  Java
关注(0)|答案(3)|浏览(155)

如何使用css删除.reportValidity()后的标准验证工具提示
validation tooltip message
有什么想法吗?

voase2hg

voase2hg1#

关键词是:不可能修改(这包括隐藏)实际的工具提示,因为它是浏览器本地实现,至少对于主要的浏览器引擎如Blink、Webkit和Gecko(分别称为Chromium、Safari和Firefox)是不可能的。
参考文献:

  • .reportValidity()行为的HTML规范:www.example.comhttps://html.spec.whatwg.org/multipage/form-control-infrastructure.html#report-validity-steps
  • 一个曾经可能的答案:https://stackoverflow.com/a/5965505
6xfqseft

6xfqseft2#

<form novalidate> ... </form>
blmhpbnm

blmhpbnm3#

你可以通过设置一个全是空白的自定义验证消息来隐藏验证工具提示。我不确定这是不是在某个地方有文档记录,或者这是一个bug,但它在Chrome和Firefox中有效。我还没有测试过其他浏览器。

const input = document.getElementById("name");
input.setCustomValidity(" ");
document.getElementById("btn").onclick = () => input.reportValidity();
<input id="name" placeholder="Name" required>
<button id="btn">Report validity</button>

相关问题