How to remove standard validation tooltip after .reportValidity() using css

Question

Any ideas?

score 1 · Accepted Answer · answered Mar 27 '22 at 15:24

The keyword is: "standard". It's not possible to modify (this includes hiding) the actual tooltip because it's a browser native implementation, at least, not possible for major browser engines like Blink, Webkit and Gecko, namely Chromium, Safari and Firefox respectively.

References:

HTML Specification for .reportValidity() behaviour: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#report-validity-steps
An once-possible answer: https://stackoverflow.com/a/5965505

score 0 · Answer 2 · answered Mar 27 '22 at 15:10

0

<form novalidate> ... </form>

answered Mar 27 '22 at 15:10

tauzN

5,162
2
16
21

A did not use form – Passanger Feat Mar 27 '22 at 15:10
Then do use a form. – tauzN Mar 27 '22 at 15:11
I need logic of reportValidity() but without showing this error tooltip - need validate without showing this tooltip, but thanks of idea – Passanger Feat Mar 27 '22 at 15:13
1

So, I used focus to trigger custom validation styles. Thanks for help) – Passanger Feat Mar 27 '22 at 15:16

score 0 · Answer 3 · answered Feb 27 '23 at 20:07

You can hide the validation tooltip by setting a custom validation message that is all whitespace. I'm not sure if it is documented somewhere or if it is a bug, but it works in Chrome and Firefox. I haven't tested other browsers.

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>

How to remove standard validation tooltip after .reportValidity() using css

3 Answers3