How to show setCustomValidity message/tooltip without submit event

I’m using forms basic validation to check if email is correct format, then the data is sent by Ajax where it checks if email address is already in use and did the user select country/state or left default values in select boxes.

But for HTML5 form validation to be done submit event is needed, upon clicking submit if it passes that basic form validation Ajax operation is performed, but then when results come in I would like to use the same browser tooltips for interface consistency (and well I like how they look).

So is there a way to make them show up, I was unable to find if there is some special event for them or something like firing submit event but stopping it right away. Right now the field only gets a red edge and error message appears on hovering mouse over it, while the tooltip shows on again clicking submit button.

Also for browsers that don’t have native tooltips(in my case Safari) I’m using Webshims Lib and it acts exactly the same as in Chrome and Firefox.

Answer

I thought .checkValidity() would do the trick, but it doesn’t trigger the UI. (caniuse)

It sounds like .reportValidity() does what you want. (caniuse)