Test 1: Change Event auf Select Eingabefeldern

An folgendem Beispiel wird die Validity Constraint API durch das Change Event an einem Select Eingabefeld geprüft. Der Event Listener ist direkt auf das Select Element gelegt worden. Wählt man nun eine Option, wird das Select Element mittels der Constraint Validation API als richtig markiert. Lediglich der Internet Explorer 11 / Edge Browser von Microsoft validiert nicht nicht richtig.

Testfall: Auf das Select Eingabefeld klicken und die erste Option "Auswahl 1" auswählen. Die Auswahl sollte valide sein.
Ergebnis: Trifft auf alle Browser mit HTML5 Support zu. Lediglich im Internet Explorer / Edge Browser ist die Auswahl nicht valide.

Test 2: Click Event auf die Option Elemente von Select Eingabefeldern

Im Gegensatz zum ersten Test lege ich nun einfach einen Event Observer auf die Option Elemente des Select Eingabefeldes. Hier wird das Click Event observiert. Sobald eine Auswahl auf eine Option erfolgt, wird das Select Eingabefeld validiert. Die Validierung mittels der Constraint Validation API sollte nun in allen Browsern für das Select Feld funktionieren.

Testfall: Auf das Select Eingabefeld klicken und die erste Option "Auswahl 1" auswählen. Die Auswahl sollte valide sein.
Ergebnis: Das Eingabefeld wird in allen Browsern mit HTML5 Support richtig validiert.