如何使用css在.reportValidaty()之后删除标准验证工具提示

Question

如何使用css 在.reportValidaty((之后删除标准验证工具提示

验证工具提示消息

有什么想法吗？

Answer 1

关键字是："标准"；。不可能修改(包括隐藏(实际的工具提示，因为它是浏览器本机实现，至少对于Blink、Webkit和Gecko等主要浏览器引擎，即Chromium、Safari和Firefox，是不可能的。

参考文献：

• .reportValidity()行为的HTML规范：https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#report-有效性步骤
• 一个曾经可能的答案：https://stackoverflow.com/a/5965505

Answer 2

您可以通过设置一个全为空白的自定义验证消息来隐藏验证工具提示。我不确定它是在某个地方记录的，还是一个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>

Answer 3

<form novalidate> ... </form>