How do I properly use reportValidity() when I want to show an error bubble for just one input field?

Question

I want to validate and show an error bubble on just one of the tens of input fields I have on a given form. Each input field has its own required and pattern attributes set, along a function that validates input on onBlur.

To do so, I call a function on onBlur that validates, sets a custom error message using setCustomValidity() and then calls reportValidity() on the form element to show the custom message on a bubble... that validates my first field alright, but when I onBlur that first field and it's valid, the next input field is showing an error bubble.

I know my problem is that reportValidity() validates the whole form and the empty required fields are indeed invalid... but how do I force it to show the error bubble on just the field I'm leaving? I'm having the hardest time figuring this out.

Just to be clear, this is what I refer when I say error bubble. I don't know it's technical name (And I would like to know it!)

Answer 1

Instead of calling reportValidity() on the HTMLFormElement, you can call reportValidity() on each HTMLInputElement.

The Example below shows two required HTMLInputElement's, and the second one is validated.

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

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