Как правильно использовать reportValidity (), когда я хочу показать сообщение об ошибке только для одного поля ввода?

Question

Я хочу проверить и показать сообщение об ошибке только на одном из десятков полей ввода, которые у меня есть в данной форме.Каждое поле ввода имеет свои собственные обязательные атрибуты и атрибуты шаблона, установленные вместе с функцией, которая проверяет ввод на onBlur.

. Для этого я вызываю функцию на onBlur, которая проверяет, устанавливает специальное сообщение об ошибке, используяsetCustomValidity() и затем вызывает reportValidity() в элементе формы, чтобы показать пользовательское сообщение на пузыре ..., которое подтверждает правильность моего первого поля, но когда я включаю это первое поле и оно допустимо, следующее поле ввода показывает ошибкуbubble.

Я знаю, что моя проблема в том, что reportValidity() проверяет всю форму, и пустые обязательные поля действительно недействительны ... но как заставить его отображать пузырь ошибки только на полеуходишь?У меня самое сложное время, чтобы понять это.

Просто чтобы прояснить, это то, что я имею в виду, когда говорю об ошибке пузыря.Я не знаю, какое это техническое имя (и я бы хотел это знать!)

Answer 1

Вместо вызова reportValidity() для HTMLFormElement вы можете вызывать reportValidity() для каждого HTMLInputElement .

В приведенном ниже примере показаны два обязательных HTMLInputElementи второй подтвержден.

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

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