Constraint Validation, Change Events und Select Eingabefelder im Edge Browser

Gerade ist in einer Applikation eines Kunden aufgefallen, dass Formulare unter speziellen Umständen nicht richtig validiert werden. In diesem speziellen Fall lag ein Change Event auf einem Select Eingabefeld. Dieses Change Event sollte die Constraint Validation API direkt ausführen. Idee dahinter war, dass ein User bei Änderung seiner Auswahl sofort sieht, ob die getroffene Auswahl valide ist. Somit wird die Constraint Validation API nicht erst bei einem Click auf einen Absende-Button ausgelöst.

Das funktioniert soweit auch. Lediglich der Internet Explorer / Edge Browser von Microsoft verhält sich hier ein wenig anders. Das Change Event des Select Elements wirkt sich nicht auf die Validität des Select Elements aus. Zumindest nicht so, wie man es von anderen Browsern gewohnt ist. Klingt kompliziert, oder? Dazu mal ein kleines Beispiel.
 

Wir sehen hier ein ganz normales Formular unter HTML5 mit einem Select Auswahlfeld, welches mit dem required Attribut gekennzeichnet ist, so dass das Formular weiß, dass dieses Eingabefeld eine Pflichtangabe ist. Die erste Option enthält einen leeren Wert, um als Placeholder zu funktionieren, da HTML5 für Select Elemente keine Placeholder Attribute vorsieht. Es muss hier eine Auswahl getroffen werden. Dazu ein Absendebutton, der das ganze Formular absendet.

Wenn wir das Formular nun im Browser aufrufen würden, keine Auswahl for das Select Eingabefeld treffen und das Formular einfach absenden, greift die Constraint Validation API und zeigt eine entsprechende Error Bubble unterhalb des Eingabefeldes an.

Um die Validität des Eingabefeldes direkt bei Auswahl einer Option anzuzeigen, benutze ich das Change Event des Select Eingabefeldes. Folgender Javascript Code als Beispiel.
 

var select = document.getElementById('test-select');
select.onchange = function( event )
{
    // Validity Objekt in der Konsole ausgeben
    console.log(this.validity);
}

Der gezeigte Code-Schnipsel gibt das validity Objekt des Select Elements einfach in der Konsole aus. Das Element ist valide, wenn aus dem oben gezeigten Select Element entweder die Auswahl 1 oder die Auswahl 2 gewählt wird. Lediglich bei der ersten Auswahl „Bitte wählen Sie“ wird das Element invalide sein, da hier kein Wert vorhanden ist. Soweit funktioniert das auch. Der Internet Explorer 11 / Edge Browser reagiert allerdings nicht wie gewollt. Wählt man hier die Auswahl 1 aus, ist das Select Element nach wie vor invalide. Trifft man eine zweite Auswahl, ist das Element plötzlich valide.

Das Problem ist hier einfach, dass der Internet Explorer / Edge Browser das durch die Option Elemente ausgelöste Event nicht vernünftig an das Elternelement weiter gibt. Wir Programmierer sprechen hier vom so genannten Event Bubbling. Es scheint ein Bug zu sein.

Die Lösung

Um das Event sauber an das übergeordnete Select Element weiter zu geben, lege ich nun direkt einen Event Observer auf die Option Elemente. Sobald ein Option Element angeklickt wird, prüfe ich die Validität des übergeordneten Select Elements. Folgender Code-Schnipsel verdeutlich dieses Vorgehen noch einmal.
 

var options = document.querySelectorAll('#test-select option');
for (var i = 0,length = options.length; i < length; i++)
{
    options[i].onclick = function( event )
    {
        console.log(this.parentNode.validity);
    }
}

In diesem Beispiel gehe ich von dem Option Element aus und prüfe dann das Validity Objekt des übergeordneten Elements. Diese Herangehensweise funktioniert auch mit dem Internet Explorer / Edge Browser.

Praktisches Beispiel

Ich habe die beiden in diesem Artikel genannten Tests mal in einem veranschaulichendem Beispiel zusammengefasst. Der Quelltext ist frei einsehbar und kann gern weiter genutzt werden.

Solltet ihr andere Lösungen für das Phänomen mit dem Internet Explorer / Edge Browser haben, immer her damit. Über eine rege Diskussion würde ich mich sehr freuen.

Bildquelle: frankobingen / CCO Public Domain

1 Gedanke zu „Constraint Validation, Change Events und Select Eingabefelder im Edge Browser“

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.