DOM und 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?".

Die Interaktion zwischen dem Besucher einer Webseite und demjenigen, der die Webseite verwaltet, erfolgt heutzutage - mit Ausnahme des Austauschs von indirekten Informationen wie dem Versenden der Mausposition - fast ausschließlich über Webformulare. Wenn Besucher einer Webseite in einem Webformular Daten eingeben und zum Server schicken wollen, müssen diese dabei in vielen Fällen gewissen Plausibilitäten genügen. Diese Plausibilitäten werden in aktuellen Webseiten fast immer mit JavaScript überprüft, wenn man bereits im Client die Einhaltung der geforderten Regeln kontrollieren will.

Man kann sogar sagen, dass die Plausibilisierung von Benutzereingaben die wichtigste Anwendung von JavaScript ist. Das Plausibilisieren eines Webformulars bedeutet dabei, die Schlüssigkeit der Anwendereingaben vor einem Versenden der Daten zu kontrollieren und bei Widersprüchen zu den geforderten Vorgaben Gegenmaßnahmen zu ergreifen.

Der JavaScript-Zugriff auf Formulare ist jedoch nicht nur auf das Plausibilisieren von Formularen beschränkt. Darüber hinaus zählt das dynamische Beeinflussen von Formularinhalten zu den ganz wichtigen Aufgaben.

DOM-Konzept - das "Document Object Model"

Um zu verstehen, wie man ein Formular in einer Webseite samt den enthaltenen Elementen mit JavaScript verwenden kann, muss man kurz auf das DOM-Konzept (Document Object Model) eingehen. Dieses stellt Ihnen automatisch Objekte zur Verfügung, die unter anderem alle Bestandteile der Webseite repräsentieren. DOM ist also eine Objektbibliothek. Sie kann mittels diverser Techniken genutzt werden - sowohl aus Programmier- und Skriptsprachen als auch aus Anwendungen heraus.

In diesem Konzept wird eine (X)HTML-Seite (oder allgemein ein baumartig aufgebautes Dokument, z.B. auch ein XML-Dokument) nicht als statisch aufgebaute, fertige und nicht unterscheidbare Einheit betrachtet, sondern als differenzierbare Struktur, deren einzelne Bestandteile Programmen und Skripten dynamisch zugänglich sind. Dieser Ansatz ermöglicht die individuelle Behandlung von Bestandteilen einer Webseite auch dann, wenn die Webseite bereits in den Browser geladen ist. Und zwar eine Behandlung, die weit über die einfache Interpretation durch den Browser beim Laden eines Dokuments von oben nach unten hinausgeht.

Das DOM-Konzept beinhaltet verschiedene Teilaspekte, die weit über das hier behandelte Thema hinausgehen. Es veranlasst beispielsweise aber einen Browser, eine (X)HTML-Seite zwar wie eine gewöhnliche Textdatei zu lesen und entsprechende (X)HTML-Anweisungen auszuführen. Darüber hinaus wird der Browser jedoch beim Laden der Webseite alle ihm im Rahmen des Konzepts bekannten und einzeln identifizierbaren Elemente einer Webseite bezüglich ihres Typs, ihrer relevanten Eigenschaften und ihrer Position innerhalb der Webseite indizieren. Dies stellt dann eine Art Baum im Hauptspeicher des Rechners dar, der aus so genannten Knoten besteht und beim Laden der Webseite aufgebaut und beim Verlassen der Seite wieder gelöscht wird. Auf diese Weise hat der Browser nach dem Laden der Webseite genaue Kenntnis über alle relevanten Daten sämtlicher eigenständig für ihn ansprechbarer Elemente in der Webseite.

Wie kann man mit JavaScript auf Formulare zugreifen?

Wie auf jedes andere DOM-Element können Sie mit JavaScript auch auf Formulare zugreifen. Das geht auf verschiedene Weise. Entweder über

ein DOM-Objektfeld mit Namen forms (ein Array),
einen Namen bzw. die Methode getElementsByName(),
über eine ID, die Sie mit der Methode getElementById() selektieren,
die Methode getElementsByTagName("form") - beachten Sie, dass es nicht forms heißt - oder
per this, wenn Sie eine Funktion aus einem Formular aufrufen.

Das Gleiche gilt für den Zugriff auf die enthaltenen die Formularelemente, wobei diese über das Objektfeld elements zur Verfügung stehen und in einem Formularcontainer eingeschlossen sind. Wenn Sie also nicht direkt den Knoten ansprechen (etwa getElementsByName() über oder getElementById()), müssen Sie per Punktnotation das Formular voranstellen.

Unabhängig von der Art der Selektion eines Knotens stehen Ihnen aber die gleichen Eigenschaften und Methoden zur Verfügung!

Die Elemente eines Webformulars

Ein Formularobjekt hat eine ganze Reihe von Eigenschaften. Diese entsprechen im Wesentlichen den Parametern, die Sie bei dem <form>-Tag in (X)HTML setzen können.

Eigenschaft	Beschreibung
action	Die Eigenschaft enthält die den Wert, der bei der Definition des Formulars im HTML-Attribut action steht.
elements	Die Eigenschaft ist ein Array, das alle Elemente als vollständige Repräsentation der HTML-Implementierung in dem Formular enthält.
encoding	Über diese Eigenschaft erhalten Sie Zugang zum Kodierungstyp des Formulars.
length	Die Eigenschaft enthält die Anzahl der Elemente des Formulars.
method	Die Eigenschaft enthält den Wert, der bei der Definition des Formulars im HTML-Attribut method steht.
name	Der Name des Formulars.
target	Die Eigenschaft enthält den Wert, der bei der Definition des Formulars im HTML-Attribut target steht.

Eine der wichtigsten Eigenschaften von einem Formularobjekt ist jedoch sicher dessen Objektfeld elements. Darüber - unabhängig davon, wie Sie den Knoten selektieren - haben Sie Zugriff auf alle einzelnen Elemente innerhalb von Formularen.

Einige der Eigenschaften von elements sind bereits verfügbar, wenn der Browser wenigstens ein Formular mit wenigstens einem Element in der HTML-Datei vorfindet. Andere Eigenschaften sind jedoch nur für bestimmte Formularelemente verfügbar (das heißt wenn ein Element des zugeordneten Typs überhaupt vorhanden ist).

Eigenschaft	Beschreibung
checked	Diese Eigenschaft steht zur Verfügung, wenn das Element ein Radio- oder Checkbutton ist. Sie repräsentiert, ob ein Radio- oder Checkbutton aktiviert ist oder nicht. Mögliche Werte sind true beziehungsweise ein numerischer Wert ungleich 0 oder false beziehungsweise 0.
defaultChecked	Diese Eigenschaft steht zur Verfügung, wenn das Element ein Radio- oder Checkbutton ist. Sie repräsentiert, ob ein Radio- oder Checkbutton per Voreinstellung aktiviert ist oder nicht. Mögliche Werte sind true beziehungsweise ein numerischer Wert ungleich 0 oder false beziehungsweise 0.
defaultValue	Diese Eigenschaft steht zur Verfügung, wenn das Element ein Eingabefeld ist. Sie repräsentiert den voreingestellten Text eines Eingabefeldes.
form	In der Eigenschaft form wird das zugehörige, umgebende Formular eines Formularelements als Objekt referenziert, so dass Sie auch darüber alle Eigenschaften und Methoden des Formular-Objekts verwenden können. Man benutzt die Eigenschaft form hauptsächlich, wenn man über ein Element eines Formulars Zugriff auf das Formular selbst haben möchte.
name	Der Name des Formularelements, wie er in HTML bei der Definition des Elements mit der Zusatzangabe name zugewiesen wurde.
type	Die Eigenschaft repräsentiert Information über den Elementtyp eines Formularelements. Sie kann in Zusammenhang mit allen Formularfeldern angewendet werden.
value	Der Wert in dem Formularelement. Das ist der Schlüssel zu manuellen Benutzereingaben.

Mit dem Objektfeld options (in der Objekthierarchie unter elements als Eigenschaft angeordnet) haben Sie Zugriff auf Auswahllisten innerhalb eines Formulars.

Eigenschaft	Beschreibung
options[n].defaultSelected	Der Wert repräsentiert die Defaulteinstellung in einer Auswahlliste. Das heißt ob sie per Voreinstellung aktiviert ist oder nicht. Mögliche Werte sind true beziehungsweise ein numerischer Wert ungleich 0 oder false beziehungsweise 0.
selectedIndex	Der Wert dieser Eigenschaft repräsentiert, welche Auswahlmöglichkeit in einer Auswahlliste aktiviert ist.
options[n].selected	Der Wert dieser Eigenschaft repräsentiert, ob eine Auswahlmöglichkeit in einer Auswahlliste aktiviert ist. Mögliche Werte sind true beziehungsweise ein numerischer Wert ungleich 0 oder false beziehungsweise 0.
options[n].value	Über den Wert der Eigenschaft erhalten Sie den internen Wert des über den Index angegebenen Eintrags in einer Auswahlliste.
options[n].text	Der Wert repräsentiert den Text einer Auswahlmöglichkeit in einer Auswahlliste.

Plausibilisierung von Webformularen per JavaScript