Detect Pseudoklasse: ungültig von Javascript

Question

Gibt es eine Möglichkeit, das "Aussehen" der Pseudo-Klasse :invalid auf einem input Element durch Javascript zu erkennen?

Mit anderen Worten, wie könnte etwas Javascript-Code ausgelöst werden, wenn die :invalid Pseudo-Klasse auf einem input Element erscheint?

Answer 1

Es liegt ein ungültiges Ereignis vor, auf das Sie achten können.

Das ungültige Ereignis wird ausgelöst, wenn ein übermittelbares Element überprüft wurde und seinen Einschränkungen nicht entspricht. Die Gültigkeit von übermittelbaren Elementen wird überprüft, bevor ihr Eigentümerformular gesendet wird, oder nachdem die checkValidity() des Elements oder seines Eigentümerformulars aufgerufen wurde.

https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/invalid

Es gibt auch einige Eigenschaften, die Sie auf Elemente auf Gültigkeit prüfen zugreifen können, wenn das ist mehr, was Sie wollen.

.validity.valid

Das Element alle Validierungen Einschränkung erfüllt, und wird daher als gültig betrachtet.

https://developer.mozilla.org/en-US/docs/DOM/ValidityState

Edit: Ich habe einige Dinge gelernt, da ich diese Frage ...

beantwortet Der .validity.valid tatsächlich Teil der Einschränkung ist Constraint Validation API und Unterstützung für sie spotty besten ist, die ist schade (es gibt viele tolle Sachen in dieser API).

Jedoch scheint etwas, das gut zu funktionieren scheint, querySelectorAll(':invalid'), die eine non-live NodeList aller Formularelemente zurückgibt, die derzeit ungültig sind. Sie könnten addEventListener('change' ..etc, etc auf Ihren Formularelementen aufrufen und bei jedem Fehler eine Gültigkeitsprüfung abfragen.