Information Technology Reference
In-Depth Information
3.4.1 Das »invalid«-Event
Bei der Überprüfung des Formulars wird für Elemente, die einen ungültigen
Inhalt haben, das Event invalid ausgelöst. Das können wir uns zunutze machen
und individuell auf fehlerhafte Werte reagieren.
window.onload = function() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
inputs[i].addEventListener("invalid", function() {
alert("Feld "+this.labels[0].innerHTML
+" ist ungültig");
this.style.border = 'dotted 2px red';
}, false);
}
}
Nachdem die Seite geladen ist, wird (wie schon im Beispiel auf Seite 75) eine
Liste aller input -Elemente generiert. An jedes Element wird anschließend ein
Event-Listener angehängt, der den Fehlerfall behandelt. Im vorliegenden Bei-
spiel wird ein alert -Fenster geöffnet, und das Element erhält einen rot ge-
punkteten Rahmen. Für den Text im alert -Fenster wird die Beschriftung des
input -Elements verwendet.
Bei Formularen mit vielen Eingabefeldern ist diese Vorgehensweise nicht ideal.
Der Anwender muss für jede fehlerhafte Eingabe die
-Schaltfläche ankli-
cken und anschließend im Formular das betreffende Feld suchen und erneut
ausfüllen. Manchmal wäre es günstiger, wenn der Anwender sofort nach dem
Ausfüllen eine Benachrichtigung bekäme, sollte das Feld einen ungültigen In-
halt enthalten. Das wollen wir im nächsten Abschnitt probieren.
OK
3.4.2 Die »checkValidity«-Funktion
Um die Überprüfung eines input -Elements auszulösen, wird die checkValidi-
ty -Funktion für dieses Element aufgerufen. Was normalerweise passiert, wenn
das Formular abgeschickt wird, kann man aber auch »von Hand« starten:
<input type=email name=email
onchange="this.checkValidity();">
Search WWH ::




Custom Search