Plausibilisierung von Webformularen per JavaScript

Im zweiten Teil unserer kleinen Reihe zur Plausibilisierung von Formular-Daten geht es diesmal konkret um die Überprüfung der in ein Webformular eingegebenen Daten per JavaScript, direkt beim Client.

Der erste Teil beschäftigt sich mit Plausibilisierung allgemein und dem Erstellen von Plausibiliserungskonzepten für Webformulare: "Wo plausibilisieren sich Formular-Daten am besten?".

Bei Webapplikationen hat es sich durchgesetzt, ein Formular in der Regel erst beim Abschicken der Formulardaten zum Server zu kontrollieren. Das wird sich aber wahrscheinlich durch den Erfolg von AJAX nach und nach etwas mehr zur Plausibilisierung beim Verlassen eines Feldes verlagern. AJAX erlaubt es beispielsweise, einem Anwender eine Rückmeldung des Servers zu geben, wenn beim Verlassen eines Eingabefeldes ein offensichtlicher Fehler vorliegt, ohne ihn durch Mitteilungsfenster oder Neuladen der Seite in seinem Arbeitsfluss zu behindern. So wird AJAX nach und nach dafür sorgen, dass sich Web-Applikationen auch bei der Plausibilisierung mehr dem Verhalten von Desktop-Applikationen annähern.

Dennoch ist das Abschicken von Formulardaten derzeit die (!) zentrale Stelle, wo Webapplikationen zu plausibilisieren sind, wenn bereits im Client eine Überprüfung stattfinden soll. Über den Eventhandler onSubmit haben Sie die Möglichkeit, die Eingaben in Formularfeldern beim Verschicken der Daten zu kontrollieren. Der Eventhandler onSubmit steht speziell für Formulare bereit, um vor der Versendung des Formulars Skripte aufrufen zu können und gegebenenfalls eine Bestätigung der Aktion einzuholen. Dazu wird onSubmit im einleitenden Formular-Tag des Formulars notiert. Wenn ein Anwender das Formular mit einem Klick auf die Submit-Schaltfläche abschicken will, wird vor dem Abschicken die JavaScript-Funktionalität ausgeführt, die beim Eventhandler onSubmit notiert ist. Anschließend werden die Formulardaten verschickt.

Die eben gezeigte Technik zeigt noch nicht, wie man auf den Selektionszustand von einem Optionsfeld oder einem Kontrollkästchen zugreifen kann? Hier steht ja die Eigenschaft value nicht zur Verfügung.

Aber sowohl die Objektrepräsentation von Optionsfeldern als auch Kontrollkästchen in einer Webseite verfügen über die Boolesche Eigenschaft checked. Diese korrespondiert mit dem entsprechenden (X)HTML-Attribut und ist aus JavaScript heraus sowohl zu lesen als auch zu schreiben.