Information Technology Reference
In-Depth Information
Die
initEventListener
-Funktion läuft über alle
input
-Elemente und belegt das
onchange
-Event mit einer anonymen Funktion, die das entsprechende Element
auf seine Gültigkeit überprüft.
function initEventListener() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
if (!inputs[i].willValidate) {
continue;
}
inputs[i].onchange = function() {
this.checkValidity();
}
}
}
Der Event-Listener wird nur dann angehängt, wenn das Element eine Mög-
lichkeit der Überprüfung hat. Im vorliegenden Beispiel haben die beiden
Schaltflächen zum Absenden beziehungsweise zum Zwischenspeichern kei-
ne Überprüfungsmöglichkeit und bekommen daher kein
onchange
-Event. Wie
im vorangegangenen Abschnitt schon erklärt wurde, ist die Überprüfung der
einzelnen Formularfelder nach dem Ausfüllen des Feldes angenehmer als die
Überprüfung des gesamten Formulars mit dem
oninput
-Event.
Um die Benutzerfreundlichkeit des Formulars zu verbessern, wollen wir die
als
required
markierten Elemente hervorheben, damit dem Anwender sofort
klar wird, welches die wichtigen Felder sind. Glücklicherweise müssen wir
dazu nicht jedes Element mit einem extra Stil versehen, CSS3 bringt den neuen
Selektor :required mit, der genau für diesen Fall gedacht ist. Die folgende An-
weisung rahmt alle vorgeschriebenen Elemente mit oranger Farbe ein.
:required { border-color: orange; border-style: solid; }
Die Definition der einzelnen
input
-Felder birgt keine großen Überraschungen.
E-Mail-Adresse und Telefonnummer haben ihre eigenen Typen und sind vorge-
schrieben; das Datum, an dem der Defekt auftrat, ist vom Typ
date
und kann
daher mit einem Kalenderfenster ausgewählt werden. Das zweispaltige Layout
im oberen Teil der Webseite wird mit
div
-Elementen erreicht, die nebeneinan-
der liegen. Trotzdem möchten wir, dass Anwender, die die Tabulatortaste zum
Weiterspringen verwenden, das Formular von oben nach unten ausfüllen und
nicht, der HTML-Logik folgend, zuerst die linke und dann die rechte Spalte.
