| Formulare |
Eine beliebte Anwendung von JavaScript ist das Prüfen von Eingaben des Benutzers in Formularfeldern. Dabei kann das Abschicken des Formulars so lange unterbunden werden, bis das Formular hinreichend ausgefüllt wurde. Die Prüfung kann nach verschiedenen Kriterien erfolgen:
- Wurde überhaupt etwas eingetragen?
- Ist der Inhalt richtig? (Existiert ein @ in einer e-mail-Adresse?)
- Sind die Inhalte plausibel? (Widersprechen sich Angaben?)
Die Prüfung des Formulars kann mit dem Event-Handler onSubmit und einer Funktion z.B. pruefen() ausgeführt werden. Damit kollidiert jedoch wieder der onSubmit-Handler mit der HREF. Als Umweg wird hier, wie bereits vorher beschrieben, die Funktion pruefen() mit einem Rückgabewert versehen. Liefert dieser false, so wird die HREF unterbunden. Bei true hingegen ausgeführt.
Beispiel:
<FORM action="rueckmeldung.htm" name="Registrierung" onSubmit="return pruefen()">
Organisation: <INPUT type="text" name="Orga">
Name: <INPUT type="text" name="Name">
Registrierungscode: <INPUT type="text" name="Reg">
</FORM>
Alle Formulare eines Dokuments stehen in einem Array namens dokument.forms[] in der Reihenfolge, in der sie im HTML-Dokument vorkommen. Die Indexzählung beginnt wieder bei 0. Das erste Formular ist also über dokument.forms[0] zu erreichen.
Alternativ kann man das Formular auch über den vergebenen Namen aufrufen. Im Beispiel oben also: dokument.Registrierung
Das Formular wiederum speichert alle Formularelemente in einem Array namens elements[]. Das Eingabefeld "Registrierungscode" in unserem Beispiel ist also über
dokument.forms[0].elements[2] oder dokument.Registrierung.Reg oder dokument.Registrierung.elements[2] oder dokument.forms[0].Reg
zu erreichen.
In der Regel läßt sich das value Attribut der einzelnen Elemente auslesen, das die Eingabe des Benutzers beinhaltet.
Wenn Sie mit dem name-Parameter arbeiten, sollten Sie unbedingt immer eindeutige Namen vergeben.
Die Prüfung, ob überhaupt etwas eingetragen wurde, kann recht einfach mit einer bedingten Verzweigung erledigt werden.
Um sich Schreibarbeit zu ersparen, wird der Fragebogen am Beginn der Funktion durch eine Variable referenziert.
function pruefen() {
var FrB = document.forms[0];
if (FrB.Orga.value == "")
return false;
if (FrB.Name.value == "")
return false;
if (FrB.Reg.value == "")
return false;
}
Besonderheiten:
a) Radio-Buttons und Checkboxen
Bei Radio-Buttons kann immer nur einer ausgewählt werden. Da sie jedoch - um sie als Gruppe zu kennzeichnen - alle einen gleichlautenden name-Parameter besitzen, würde man mit der Abfrage über den Namen nicht weiterkommen. Also müssen die Arrays bemüht werden.
Darüber hinaus muß jeder einzelne Button geprüft werden, ob er angewählt ist oder nicht. Das kann bei vielen Buttons einer Gruppe mit einer Schleife geschehen oder, bei nur wenigen, mit einer bedingten Verzweigung. Das Attribut, das hier getestet wird, ist diesmal nicht value sondern checked, das einen booleschen Wert zurückgibt.
Beispiel:
var FrB = document.forms[0];
if(! (FrB.myRadio[0].checked || FrB.myRadio[1].checked))
return false;
b) Auswahllisten
Auf Auswahllisten kann über das name-Attribut des SELECT-Tags zugegriffen werden. Deren Optionen befinden sich wieder in einem Array namens options[], die jeweils die boolesche Eigenschaft selected haben. Mit der Eigenschaft value kann auf das value-Attribut zugegriffen werden.
Wenn man keinen default-Wert für die Auswahlliste vorgeben will, läßt man den ersten Eintrag meist leer oder belegt ihn mit einem Text wie "Bitte auswählen". Daher muß das Programm die Auswahl des ersten Eintrags als ungültig zurückweisen.
if (FrB.myAuswahlliste.options[0].selected)
return false;
Um nicht mit einer Schleife alle Optionen durchgehen zu müssen, um zu sehen, welche ausgewählt ist, haben Auswahllisten die Eigenschaft selectedIndex, die den Arrayindex der ausgewählten Option angibt. Eine Funktion, die bei einer gültigen Auswahl den Namen der Auswahl zurückgibt, könnte folgendermaßen lauten:
if (FrB.myAuswahlliste.selectedIndex == 0)
return false;
else
return FrB.myAuswahlliste.options[FrB.myAuswahlliste.selectedIndex].value;
Siehe hierzu auch:
Eine weitere Möglichkeit, den Benutzer zu einer Eingabe zu zwingen, ist das Verwenden eines modalen Fensters (prompt).