Ответ 1
Существует недопустимое событие, которое вы можете прослушать.
Недействительное событие запускается, когда проверяемый элемент проверен и не удовлетворяет его ограничениям. Действительность подаваемых элементов проверяется перед отправкой их формы владельца или после вызова функции checkValidity() элемента или его владельца.
https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/invalid
Есть также некоторые свойства, к которым вы можете получить доступ, чтобы проверить правильность элементов, если это больше того, что вам нужно.
.validity.validЭлемент удовлетворяет всем ограничениям проверки и поэтому считается действительным.
https://developer.mozilla.org/en-US/docs/DOM/ValidityState
Изменить: Я узнал кое-что, потому что я ответил на этот вопрос...
.validity.valid на самом деле является частью ограничения API проверки ограничений, а поддержка spotty в лучшем случае, что слишком плохо (в этом API много хорошего).
Однако, что-то, что кажется хорошо работает, querySelectorAll(':invalid'), которое возвращает неживой NodeList всех элементов формы, которые в настоящее время недействительны. Вы можете называть addEventListener('change'..etc и т.д. В своих элементах формы и запрашивать достоверность всякий раз, когда это срабатывает.