Information Technology Reference
In-Depth Information
Gibt man eine ungültige E-Mail-Adresse ein und verlässt man das Eingabe-
feld (entweder mit der Tabulator-Taste oder durch einen Mausklick auf eine
andere Stelle im Browser), so meldet der Browser (zurzeit zumindest Opera)
den Fehler unmittelbar (vergleiche Abbildung  3.13). Noch eleganter wird die
Fehlerbehandlung, wenn wir an das onchange -Event von allen input -Elementen
eine Funktion zum Überprüfen der Eingabe hängen.
window.onload = function() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
if (!inputs[i].willValidate) {
continue;
}
inputs[i].onchange = function() {
if (!this.checkValidity()) {
this.style.border = 'solid 2px red';
this.style.background = '';
} else {
this.style.border = '';
this.style.background = 'lightgreen';
}
}
}
}
In der bereits bekannten Schleife über alle input -Elemente wird als Erstes
kontrolliert, ob das Element für eine Überprüfung zur Verfügung steht. Enthält
willValidate nicht den Wert true , wird die Schleife mit dem nächsten Element
fortgesetzt. Andernfalls wird das onchange -Event mit einer anonymen Funktion
belegt, in der die checkValidity -Funktion aufgerufen wird. this bezieht sich
innerhalb der anonymen Funktion auf das input -Element. Schlägt die Gültig-
keitsprüfung fehl, so wird das Element mit einer roten Umrandung versehen;
im anderen Fall wird der Hintergrund des Elements hellgrün eingefärbt. Das
Zurücksetzen der Hintergrundfarbe beziehungsweise des Rahmens auf eine
leere Zeichenkette ist notwendig, damit der Browser bei einer richtigen Einga-
be nach einer falschen Eingabe die Formatierung wieder auf den Standardwert
stellt. Abbildung 3.1 zeigt, wie die checkValidity -Funktion einen Fehler bei der
Zeiteingabe anmahnt.
Search WWH ::




Custom Search