Обнаруживать псевдокласс: недопустимый из javascript

Есть ли способ обнаружить "появление" псевдокласса :invalid элемента input через Javascript?

Другими словами, как может запускаться код Javascript для запуска, когда псевдокласс класса :invalid появляется в элементе input?

Ответ 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 и т.д. В своих элементах формы и запрашивать достоверность всякий раз, когда это срабатывает.