Webdesign mit JavaScript: Formulare und Validierung

In diesem Kapitel: · Formulare mit JavaScript steuern · Das Schlüsselwort this verstehen · Aus der Formulareingabe Inhalt erzeugen · Formulare vor dem Abschicken abfangen · Die Formulareingabe validieren

In diesem Kapitel befassen wir uns mit der Formular-Schnittstelle: Auswahlmenüs, Optionsschalter, Texteingabefelder usw. Wir werden eine amüsante JavaScript-Variante des bekannten Spiels Madlibs erstellen, die veranschaulicht, wie Formulare und JavaScript zusammenarbeiten. Anschließend werden Sie in einer realistischeren Form lernen, wie man mit JavaScript Formulare validiert.

Einführung in Formulare

Bevor wir mit den Beispielen beginnen, sollten Sie verstehen, wie JavaScript auf Formulare zugreift. Wenn Sie bereits wissen, wie Formulare in HTML erstellt werden, haben Sie es schon fast geschafft. Bauen wir also zuerst ein einfaches Formular, wie es in Abbildung 4-1 dargestellt ist, und sehen wir uns an, wie JavaScript auf die Informationen in diesem Formular zugreift. Beispiel 4-1 zeigt den HTML-Code für das einfache Formular.

In JavaScript sind Verweise immer namentliche Verweise. Meist wird der Name eines HTML-Objekts (z.B. eines Formulars) vom Attribut name seines Tags bestimmt. Der Name unseres Formulars ist z.B. einfach. Das Formular enthält ein Texteingabefeld und eine Schaltfläche. Das Texteingabefeld heißt eingabe, die Schaltfläche hat keinen Namen.

Abbildung 4-1: Ein einfaches Formular

Wie greifen wir nun auf den Text zu, den der Anwender in eingabe eingibt? Wir müssen im JavaScript-Baum, den wir in Kapitel 1 kennengelernt haben, nach oben gehen. Wie Sie bereits wissen, gehören alle Bestandteile der Seite zu einem Objekt namens document. Wenn Sie auf einen Bestandteil dieses Dokuments verweisen, z.B. auf ein Formular, dann ist dieser Teil immer eine Eigenschaft des document-Objekts. Da wir den Namen des Formulars kennen (einfach), können wir mit JavaScript ganz einfach darauf zugreifen: document.einfach. Um das Texteingabefeld zu erhalten, müssen wir noch ein wenig höher klettern. Ebenso wie das Formular eine Eigenschaft des Dokuments ist, sind die Elemente des Formulars (z.B. das Texteingabefeld und die Schaltfläche) Eigenschaften des Formulars. Wenn wir also auf den Wert des Texteingabefeldes eingabe verweisen möchten, müssen wir sagen: »Gib mir den value des Texteingabefeldes namens eingabe im Formular namens einfach im document.« In JavaScript sieht dies folgendermaßen aus:

Wenn wir von nun an auf das aktuelle Dokument verweisen, verwenden wir nicht mehr window.document, sondern document.

Um diese Informationen anzuzeigen, behandeln wir sie genau wie eine Variable. Wir können sie z.B. in einem Dialogfeld anzeigen lassen:

Sobald Sie die Syntax verstanden haben, können Sie viele interessante Skripte wie z.B. das Skript Madlibs im folgenden Abschnitt schreiben.


Versuchen Sie das einmal Wenn Sie auf ein bestimmtes Formularobjekt wie z.B. document.einfach.eingabe.value verweisen, müssen Sie sehr viel tippen, um auf das letzte kleine Element zugreifen zu können. Zum Glück gibt es in JavaScript eine Kurzform mit nur einem einzigen Wort, die Ihnen diese Tipparbeit erspart: this. In JavaScript hat das Wort this eine Sonderstellung, da ein Objekt (oder Element) damit auf sich selbst verweisen kann. In der Realität bezeichnen Sie sich selbst z.B. nicht mit Ihrem vollständigen Namen, sondern mit »ich«. Ähnlich kann ein Formular (oder jedes andere Objekt) mit this auf sich selbst verweisen. Wenn Sie auf das Formular im Beispiel 4-1 mit seinem vollständigen Namen verweisen, sieht dies folgendermaßen aus: document.einfach Wenn Sie jedoch innerhalb des Formulars arbeiten (z.B. im Tag form einen Event-Handler schreiben), können Sie auch so auf das Formular verweisen: this Im Event-Handler können wir den Wert des Texteingabefeldes mit etwas weniger Tipparbeit ermitteln, wenn wir this verwenden: alert(this.eingabe.value);

Madlibs

Madlibs: Amerikas beliebtestes Gesellschaftsspiel - vor 20 Jahren. Heute ist es zwar etwas altmodisch, man kann damit jedoch immer noch sehr gut lernen, wie man Formulare mit JavaScript verbindet. Eine kleine Erklärung zu diesem Spiel ist hier vielleicht angebracht: Der Spieler gibt verschiedene Verben, Substantive, Adjektive und Wörter anderer Wortarten in ein Formular ein. Diese Wörter werden dann an zuvor festgelegten Stellen in einen fertigen Text eingefügt, z.B. in ein Gedicht, einen Werbetext, eine Ansprache oder irgendeinen anderen Text, der auf wenigen Seiten unterzubringen ist. Daraus ergibt sich dann ein oft witziger und immer unvorhersehbarer Text.

Das Formular ausfüllen

Zuerst erstellen wir ein Formular, in das der Besucher Wörter eingibt. Die in dieses Formular eingegebenen Wörter werden am Ende in einen Text eingefügt und mit JavaScript in einem eigenen Fenster angezeigt.

Das Eingabeformular madlibs nennt sechs Wortarten und stellt Texteingabefelder bereit, in die der Anwender die Wörter eingeben soll. Abbildung 4-2 veranschaulicht dies. Im HTML-Code für dieses Formular hat jedes Eingabefeld einen eindeutigen Namen; diese Namen benötigen wir später, um den Text zusammenzufügen. Beispiel 4-2 zeigt den Code für das Formular.

Beispiel 4-2: HTML-Code für das Madlibs-Formular

 <html>
 <head>
 <title>Madlibs-Formular</title>
 </head>
 
 <body>
   <form name="madlibs">
     <table>
       <tr>
         <td>Tätigkeit:</td>
         <td><input type="text" name="eingabe1"></td>
       </tr>
       <tr>
         <td>männliches Substantiv:</td>
         <td><input type="text" name="eingabe2"></td>
       </tr>
       <tr>
         <td>Adjektiv:</td>
         <td><input type="text" name="eingabe3"></td>
       </tr>
       <tr>
         <td>Substantiv:</td>
         <td><input type="text" name="eingabe4"></td>
       </tr>
       <tr>
         <td>Substantiv im Plural:</td>
         <td><input type="text" name="eingabe5"></td>
       </tr>
       <tr>
         <td>Verb:</td>
         <td><input type="text" name="eingabe6"></td>
       </tr>
     </table>
     <input type="button" value="Einsetzen" onClick="macheMadlibs();">
   </form>
 </body>
 </html>

Am Ende des Eingabeformulars befindet sich die Schaltfläche »Einsetzen«, die einen Event-Handler enthält, der die Funktion macheMadlibs() ausführt. Nachdem der Anwender alle Texteingabefelder ausgefüllt hat, kann er diese Schaltfläche anklicken, um die Madlibs-Geschichte zu erzeugen. Diese Funktion kombiniert die eingegebenen Werte mit dem vorhandenen Text und zeigt das Ergebnis dann in einem eigenen Fenster an.

Alternativ dazu können Sie die Ausführung der Funktion auch mit einem Link starten:

 <a href="javascript:macheMadlibs();">Einsetzen</a>

Abbildung 4-2 : Das Madlibs-Formular, das vom Anwender verschiedene Wörter erfragt

Den Text erzeugen

Abbildung 4-3 zeigt den Text, der entsteht, wenn man die Antworten des Anwenders im Formular mit der JavaScript-Funtion macheMadlibs() kombiniert, die in Beispiel 4-3 gezeigt wird.

Abbildung 4-3: Das Fenster mit dem Madlibs-Text

Beispiel 4-3: Die Funktion macheMadlibs()

 <script language="JavaScript">
 function macheMadlibs() {
     var text = "<html><head><title>Faust</title></head>" +
         "<body><h1>Faust spricht:</h1><p>" +
         "Habe nun, ach! Philosophie,<br>" +
         "Juristerei und " +
         document.madlibs.eingabe1.value + ", <br>" +
         "Und leider auch Theologie!<br>" +
         "Durchaus studiert, mit heißem Bemühn.<br>" +         "Da steh' ich nun, ich armer " +
         document.madlibs.eingabe2.value + "!<br>" +
         "Und bin so " +
         document.madlibs.eingabe3.value + ", als wie zuvor;<br>" +
         "Heiße " +
         document.madlibs.eingabe4.value + ", heiße Doktor gar<br>" +
         "Und ziehe schon an die zehen Jahr'<br>" +
         "Herauf, herab und quer und krumm<br>" +
         "Meine " +
         document.madlibs.eingabe5.value + " an der Nase herum -<br> " +
         "Und sehe, daß wir nichts " +
         document.madlibs.eingabe6.value + " können! <br>" ;
     libsFenster = window.open("", "madlibs",
         "width=400,height=310,scrollbars=yes");
     libsFenster.document.write(text);
     libsFenster.document.close();
 }
 </script>

Die Funktion macheMadLibs() ist für alle Aktionen zuständig: Sie fügt die vom Anwender angegebenen Wörter in den Text ein und zeigt die vollständige Version in einem neuen Fenster an.

Zuerst erstellt die Funktion eine neue Variable namens text. Dieser Variablen wird eine Kombination aus vorhandenem Textmaterial und Texteingabewerten aus dem Formular zugewiesen. Durch die Kombination dieser Informationen in der richtigen Reihenfolge entsteht das Endprodukt: eine Madlibs-Geschichte. Sehen wir uns nun einige Zeilen genauer an, die text hinzugefügt werden, damit wir verstehen, wie dieses Skript funktioniert:

 "Habe nun, ach! Philosophie,<br>" +
 "Juristerei und " +
 document.madlibs.eingabe1.value + ", <br> " +
 "Und leider auch Theologie!<br>" +

Diese Zeilen kombinieren den statischen Text mit einem Wert, der in das Formular eingegeben wird. Der Ausdruck beginnt mit »Habe nun, ach! Philosophie, Juristerei und« und fügt dann den Wert aus dem ersten Texteingabefeld ein (den Wert des Texteingabefeldes eingabe1 im Formular madlibs im document): document.madlibs.eingabe1.value. Anschließend fügt die Funktion »Und leider auch Theologie!« ein.

Nehmen wir z.B. an, der Anwender habe in eingabe1 das Wort »Bügeln« eingegeben. Dadurch erhalten wir die Zeichenkette »Habe nun, ach! Philosophie, Juristerei und Bügeln Und leider auch Theologie!«. Auf dieselbe Art wird auch der Rest des Textes erzeugt.

Nachdem der Text zusammengesetzt und in die Variable text eingefügt wurde, muß er noch angezeigt werden. Hierfür sind die letzten drei Zeilen der Funktion zuständig. Zuerst erzeugt die Funktion ein neues Fenster (400 mal 250 Pixel) und nennt es libsFenster. Dann schreibt document.write() die Informationen aus text in das neue Fenster. Beachten Sie, daß die Funktion libsFenster.document.write(text) verwendet. Wenn wir statt dessen document.write(text) angeben, wird der Text nicht im Dokument des neuen Fensters, sondern in dem des aktuellen Fensters angezeigt. Indem wir im Baum zu dem neuen Fenster, libsFenster, hinaufgehen, zeigen wir die Informationen dort an.

Die letzte Zeile des Skripts, libsFenster.document.close(), ist ein kleines, aber wichtiges Detail: Sie teilt dem Fenster mit, daß Sie mit der Eingabe in dieses Fenster fertig sind und es die von Ihnen eingegebenen Daten anzeigen soll. Immer wenn Sie in ein anderes als das aktuelle Fenster schreiben, müssen Sie diese Zeile einfügen; nur wenn Sie document.write() verwenden, ist diese Zeile normalerweise unnötig.

Das amüsante Madlibs-Beispiel (das in Beispiel 4-4 vollständig gezeigt wird), veranschaulicht, wie JavaScript statische Informationen verändern kann, wofür meist noch nicht einmal viel Arbeit nötig ist. Ich hoffe, dieses Skript kann Ihnen als Ausgangspunkt für nützlichere Skripte dienen. (Oder vielleicht war Madlibs genau das, was Sie gesucht haben!)

Beispiel 4-4: Das vollständige Madlibs-Skript

 <html>
 <head>
 <title>Madlibs-Formular</title>
 <script language="JavaScript">
 function macheMadlibs() {
     var text = "<html><head><title>Faust</title></head>" +
         "<body><h1>Faust spricht:</h1><p>" +
         "Habe nun, ach! Philosophie,<br>" +
         "Juristerei und " +
         document.madlibs.eingabe1.value + ", <br>" +
         "Und leider auch Theologie!<br>" +         "Durchaus studiert, mit heißem Bemühn.<br>" +
         "Da steh' ich nun, ich armer " +
         document.madlibs.eingabe2.value + "!<br>" +
         "Und bin so " +
         document.madlibs.eingabe3.value + ", als wie zuvor;<br>" +
         "Heiße " +
         document.madlibs.eingabe4.value + ", heiße Doktor gar<br>" +
         "Und ziehe schon an die zehen Jahr'<br>" +
         "Herauf, herab und quer und krumm<br>" +
         "Meine " +
         document.madlibs.eingabe5.value + " an der Nase herum -<br> " +
         "Und sehe, daß wir nichts " +
         document.madlibs.eingabe6.value + " können! <br>" ;
     libsFenster = window.open("", "madlibs",
         "width=400,height=310,scrollbars=yes");
     libsFenster.document.write(text);
     libsFenster.document.close();
 }
 </script>
 </head>
 
 <body>
   <form name="madlibs">
     <table>
       <tr>
         <td>Tätigkeit:</td>
         <td><input type="text" name="eingabe1"></td>
       </tr>
       <tr>
         <td>männliches Substantiv:</td>
         <td><input type="text" name="eingabe2"></td>
       </tr>
       <tr>
         <td>Adjektiv:</td>
         <td><input type="text" name="eingabe3"></td>
       </tr>
       <tr>
         <td>Substantiv:</td>
         <td><input type="text" name="eingabe4"></td>
       </tr>
       <tr>
         <td>Substantiv im Plural:</td>
         <td><input type="text" name="eingabe5"></td>
       </tr>
       <tr>
         <td>Verb:</td>
         <td><input type="text" name="eingabe6"></td>
       </tr>
     </table>
     <input type="button" value="Einsetzen" onClick="macheMadlibs();">
   </form>
 </body>
 </html>

Die Formulareingabe überprüfen

Wenn Sie die Anwender bitten, Informationen in ein Formular einzugeben, wissen Sie nie, was Sie bekommen werden. Im allgemeinen löst man dieses Problem, indem man die Daten überprüft, bevor man etwas damit macht. In der Frühzeit des Internets, als es JavaScript noch nicht gab, bestand die einzige Möglichkeit, Daten zu überprüfen, darin, sie an den Webserver zu schicken, von einem separaten Programm (meist einem CGI-Skript) auf ihre Richtigkeit prüfen zu lassen und dann eine Antwort zurückzuschicken, die alle etwaigen Probleme aufzählte. Mit JavaScript kann ein Teil der Formularvalidierung im Webbrowser durchgeführt werden, bevor die Daten an den Server geschickt werden. (Nicht die gesamte Validierung kann im Browser vorgenommen werden: Manchmal benötigt man für die Validierung Daten, die nur auf dem Server zur Verfügung stehen, z.B. eine Kundennummer in einer serverseitigen Datenbank.)

Noch einmal this

Im Madlibs-Skript haben wir auf den Wert jedes Texteingabefeldes mit dem vollständigen Namen zugegriffen (d.h. document.madlibs.eingabe1.value). Vielleicht haben Sie sich gefragt, warum wir den Namen nicht mit this abgekürzt haben. Das Problem besteht hier darin, daß man auf ein Objekt nur dann mit this verweisen kann, wenn man sich in diesem Objekt befindet. Da wir uns in der Funktion macheMadlibs() nicht innerhalb eines Objekts befinden, hat this keine Bedeutung.

Dennoch können wir für den Zugriff auf die Eingabewerte kürzere Namen verwenden. Die Funktion macheMadlibs() wird im Event-Handler onClick der Formular-Schaltfläche aufgerufen. In diesem Event-Handler können wir mit this auf die Schaltfläche referieren und, was noch wichtiger ist, mit this.form auf das Formular verweisen, das die Schaltfläche enthält. Der Grund hierfür ist, daß jedes Formularelement die Eigenschaft form hat, die auf das Formular verweist, das das Element enthält. In dem <input>-Tag, das die Schaltfläche erzeugt hat, ist this.form daher gleichbedeutend mit document.madlibs.

Um diese Tatsache zu nutzen, schreiben wir die Funktion macheMadlibs() so um, daß sie als einziges Argument das umgebende Formular entgegennimmt. Der folgende Code zeigt einen Ausschnitt aus der überarbeiteten Funktion:

function macheMadlibs(form) { var text = "<html><head><title>Faust</title></head>" + "<body><h1>Faust spricht:</h1><p>" + "Habe nun, ach! Philosophie,<br>" + "Juristerei und " + form.eingabe1.value + ", <br>" + ... }

Wir übergeben das umgebende Formular an macheMadlibs(), wo es in der Variablen form gespeichert wird. Nun können wir auf den ersten Eingabewert mit form.eingabe1.value zugreifen, was mit document.madlibs.eingabe1.value gleichbedeutend ist.

Damit dies funktioniert, müssen wir außerdem macheMadlibs() anders als bisher aufrufen. Die überarbeitete Schaltfläche für das Madlibs-Formular sieht folgendermaßen aus:

<input type="button" value="Einsetzen" onClick="macheMadlibs(this.form);">

Dieses Verfahren erspart Ihnen nicht nur einige Tipparbeit, sondern hat zudem den Vorteil, daß es unabhängig vom Namen des Formulars immer funktioniert. Anders ausgedrückt: Damit der Code im Beispiel 4-4 funktioniert, muß das Formular madlibs heißen, da dies der Formularname ist, den macheMadlibs() erwartet.

Mit den hier gezeigten Änderungen brauchen wir nicht mehr ausdrücklich auf den Namen des Formulars zu verweisen, so daß das Beispiel auch dann noch funktioniert, wenn wir den Namen ändern.

Dieses Verfahren sollten Sie vor allem deshalb verstehen, weil es fast alle Skripte im Internet für ihre Formulare verwenden. Wenn Sie, wie die meisten Menschen, das Schreiben von Skripten lernen möchten, indem Sie sich Beispiele ansehen, dann ist es hilfreich, die Funktionsweise von this zu verstehen.

Noch einmal this Im Madlibs-Skript haben wir auf den Wert jedes Texteingabefeldes mit dem vollständigen Namen zugegriffen (d.h. document.madlibs.eingabe1.value). Vielleicht haben Sie sich gefragt, warum wir den Namen nicht mit this abgekürzt haben. Das Problem besteht hier darin, daß man auf ein Objekt nur dann mit this verweisen kann, wenn man sich in diesem Objekt befindet. Da wir uns in der Funktion macheMadlibs() nicht innerhalb eines Objekts befinden, hat this keine Bedeutung. Dennoch können wir für den Zugriff auf die Eingabewerte kürzere Namen verwenden. Die Funktion macheMadlibs() wird im Event-Handler onClick der Formular-Schaltfläche aufgerufen. In diesem Event-Handler können wir mit this auf die Schaltfläche referieren und, was noch wichtiger ist, mit this.form auf das Formular verweisen, das die Schaltfläche enthält. Der Grund hierfür ist, daß jedes Formularelement die Eigenschaft form hat, die auf das Formular verweist, das das Element enthält. In dem <input>-Tag, das die Schaltfläche erzeugt hat, ist this.form daher gleichbedeutend mit document.madlibs. Um diese Tatsache zu nutzen, schreiben wir die Funktion macheMadlibs() so um, daß sie als einziges Argument das umgebende Formular entgegennimmt. Der folgende Code zeigt einen Ausschnitt aus der überarbeiteten Funktion: function macheMadlibs(form) { var text = "<html><head><title>Faust</title></head>" + "<body><h1>Faust spricht:</h1><p>" + "Habe nun, ach! Philosophie,<br>" + "Juristerei und " + form.eingabe1.value + ", <br>" + ... } Wir übergeben das umgebende Formular an macheMadlibs(), wo es in der Variablen form gespeichert wird. Nun können wir auf den ersten Eingabewert mit form.eingabe1.value zugreifen, was mit document.madlibs.eingabe1.value gleichbedeutend ist. Damit dies funktioniert, müssen wir außerdem macheMadlibs() anders als bisher aufrufen. Die überarbeitete Schaltfläche für das Madlibs-Formular sieht folgendermaßen aus: <input type="button" value="Einsetzen" onClick="macheMadlibs(this.form);"> Dieses Verfahren erspart Ihnen nicht nur einige Tipparbeit, sondern hat zudem den Vorteil, daß es unabhängig vom Namen des Formulars immer funktioniert. Anders ausgedrückt: Damit der Code im Beispiel 4-4 funktioniert, muß das Formular madlibs heißen, da dies der Formularname ist, den macheMadlibs() erwartet. Mit den hier gezeigten Änderungen brauchen wir nicht mehr ausdrücklich auf den Namen des Formulars zu verweisen, so daß das Beispiel auch dann noch funktioniert, wenn wir den Namen ändern. Dieses Verfahren sollten Sie vor allem deshalb verstehen, weil es fast alle Skripte im Internet für ihre Formulare verwenden. Wenn Sie, wie die meisten Menschen, das Schreiben von Skripten lernen möchten, indem Sie sich Beispiele ansehen, dann ist es hilfreich, die Funktionsweise von this zu verstehen.

Es hat einige wesentliche Vorteile, Formulare mit JavaScript zu überprüfen. Zum einen erhöht es die Zufriedenheit der Besucher Ihrer Website, da Sie Probleme direkt erkennen und lösen können und die Besucher nicht gezwungen sind, zu warten, bis der Server die Daten geprüft hat. Und zum anderen muß Ihr Server auf diese Art weniger Arbeit bewältigen.

Bei der Formularvalidierung fängt man die Formulardaten ab, bevor sie an den Server geschickt werden, prüft die eingegebenen Daten und entscheidet, ob sie gesendet werden sollen. Mit JavaScript sind dafür nur einige einfache Funktionen erforderlich.

Das Formular abfangen

Um ein Formular abzufangen, bevor es abgeschickt wird, müsssen Sie den Event-Handler onSubmit einbauen. Dieser Event-Handler wurde speziell dafür entworfen, ein Formular abzufangen, damit es geprüft werden kann. Abbildung 4-4 zeigt ein einfaches Formular, das den Anwender auffordert, einen Kommentar abzuschicken, und Beispiel 4-5 zeigt den Code, der dazugehört.

Abbildung 4-4 : Das Formular »Schicken Sie uns eine Nachricht«

Beispiel 4-5: Der HTML-Code für das Nachrichtenformular

 <html>
 <head>
 <title>Feedback</title>
 </head>
 <body>
 <h1>Schicken Sie uns eine Nachricht:</h1>
 <form name="feedbackFormular" onSubmit="return istFertig(this);" method="post"
       action="/cgi-bin/messageform.cgi">
 <p><textarea name="nachricht" rows="3" cols="20" wrap="wrap"></textarea></p>
 <p><input type="submit" value="Abschicken">
 <input type="reset" value="Zurücksetzen"></p>
 </form>
 </body>
 </html>

Achten Sie darauf, an welcher Stelle der Event-Handler onSubmit steht: direkt vor dem form-Tag. onSubmit können Sie nur an dieser Stelle verwenden. Wenn der Anwender das Formular abschickt, indem er entweder die Schaltfläche Abschicken anklickt oder die Eingabetaste drückt, wird der Code im Event-Handler onSubmit ausgeführt. In diesem Fall übergibt das Formular sich selbst mit this an die Funktion istFertig(). Anders ausgedrückt: Da wir uns im Formular befinden, können wir mit this auf das Formular verweisen.

Und nun kommt der wichtige Teil: Falls der Code, den onSubmit ausführt, einen true-Wert zurückgibt, wird das Formular abgeschickt. Gibt der Code hingegen einen false-Wert zurück, dann wird der Übermittlungsvorgang gestoppt. Achten Sie darauf, daß dem Aufruf von istFertig() das Wort return voransteht. Der Handler onSubmit verlangt diese Syntax. Damit Sie besser verstehen, was dies bedeutet, wollen wir uns die Funktion, die das Formular überprüft, genauer ansehen.

Die Validierung

In unserem Beispielformular wird die Funktion istFertig(), die im Beispiel 4-6 gezeigt wird, immer dann ausgeführt, wenn der Anwender das Formular abzuschikken versucht. Die Funktion nimmt als einziges Argument ein Formular entgegen. In dem Formular im Beispiel 4-5 haben wir der Funktion this übergeben, also das aktuelle Formular.

Beispiel 4-6: Die Funktion istFertig()

 function istFertig(form) {
     if (form.nachricht.value != "") {
         return true;
     }
     else {
         alert("Bitte tragen Sie eine Nachricht ein.");
         form.nachricht.focus();
         return false;
     }
 }

Zuerst prüft die Funktion mit einer if-Anweisung den Wert des Textbereichs nachricht. Die if-Bedingung besagt: »Falls der Wert des Formularelements nachricht nicht leer ist, darf der Übermittlungsvorgang fortgesetzt werden.« (Leer wird durch leere Anführungszeichen angegeben.) Hier kommen nun true und false ins Spiel. Falls nachricht nicht leer ist, gibt die Funktion true zurück und teilt dem Formular dadurch mit, daß es den Übermittlungsvorgang fortsetzen kann. Falls nachricht leer ist (d.h. falls der Anwender versucht hat, das Formular ohne Nachricht abzuschicken), wird die else-Bedingung angewandt, und die nächsten drei Codezeilen werden ausgeführt.

Wenn der Anwender versucht hat, eine leere Nachricht abzuschicken, öffnet der Code mit der Funktion alert() ein Mitteilungsfeld, wie es in Abbildung 4-5 gezeigt wird, das den Anwender auffordert, eine Nachricht einzugeben. Nachdem der Anwender im Mitteilungsfeld OK angeklickt hat, übergibt das Skript den Fokus an das Textfeld (nachricht) im Hauptfenster des Browsers. Dies veranlaßt den Browser, den Teil der Seite anzuzeigen, der das Textfeld enthält, und den Cursor dort zu plazieren, damit der Anwender etwas eingeben kann. Die Methode focus() ist in die meisten Formularelemente integriert und erleichtert es den Besuchern, Fehler zu korrigieren, die sie beim Ausfüllen des Formulars gemacht haben. Schließlich gibt die Funktion noch false zurück, um das Abschicken des Formulars abzubrechen.

Abbildung 4-5 : Das Mitteilungsfeld, das geöffnet wird, falls der Anwender keine Nachricht eingegeben hat

Beispiel 4-7 zeigt das vollständige Skript. Natürlich ist dies nur eine sehr einfache Formularvalidierung. Im Rest dieses Kapitels werden Sie sehen, daß Sie erst den ersten Schritt getan haben, wenn Sie herausgefunden haben, ob ein Formularelement leer ist.

Beispiel 4-7: Das vollständige Skript »Schicken Sie uns eine Nachricht«

 <html>
 <head>
 <title>Feedback</title>
 <script>
 function istFertig(form) {
     if (form.nachricht.value != "") {
         return true;
     }
     else {
         alert("Bitte tragen Sie eine Nachricht ein.");
         form.nachricht.focus();
         return false;
     }
 }
 </script>
 </head>
 
 <body>
 <h1>Schicken Sie uns eine Nachricht:</h1>
 <form name="feedbackFormular" onSubmit="return istFertig(this);" method="post"
       action="/cgi-bin/messageform.cgi">
 <p><textarea name="nachricht" rows="3" cols="20" wrap="wrap"></textarea></p>
 <p><input type="submit" value="Abschicken">
 <input type="reset" value="Zurücksetzen"></p>
 </form>
 </body>
 </html>

Ist das wirklich Ihre E-Mail-Adresse?

Eines der am häufigsten verwendeten Formulare im Internet ist das E-Mail-Formular. Ein E-Mail-Formular fordert den Anwender normalerweise auf, seinen Namen, seine E-Mail-Adresse und eine Nachricht einzugeben. Häufig schicken die Anwender diese Formulare ohne oder mit einer falschen Adresse ab. Wenn dieses Problem häufig auftritt, kann es ärgerlich werden, und es ist an der Zeit, JavaScript zu Hilfe zu nehmen.

Das E-Mail-Formular

Die Abbildung 4-6 zeigt ein typisches E-Mail-Formular. Der Anwender gibt einen Namen, eine E-Mail-Adresse und einen Kommentar ein und klickt die Schaltfläche Abschicken an. Wie Sie im Code im Beispiel 4-8 sehen, wird das Formular von einem CGI-Skript verarbeitet. Bevor das Formular jedoch an das CGI-Skript geschickt wird, validieren wir die vom Anwender eingegebenen Daten mit JavaScript.

Abbildung 4-6: Ein einfaches E-Mail-Formular für Kommentare der Anwender

Beispiel 4-8: Der HTML-Code für das einfache E-Mail-Formular

 <html>
 <head>
 <title>Wir wollen wissen, was Sie denken!</title>
 </head>
 <body>
 <form name="mailFormular" action="/cgi-bin/mailform.cgi" method="post"
       onSubmit = "return istFertig(this);">
 <p>Ihr Name: <input name="derName" type="text"></p>
 <p>Ihre E-Mail-Adresse: <input name="adresse" type="text"></p>
 <p>Ihre Meinung:</p>
 <p><textarea name="meinung" rows="3" cols="50" wrap="wrap"></textarea></p>
 <p><input type="submit" value="Abschicken">
 <input type="reset" value="Zurücksetzen"></p>
 </form>
 </body>
 </html>

Wie schon in unserem früheren Beispiel führt der Event-Handler onSubmit auch hier istFertig() aus, sobald das Formular abgeschickt wird. Diesmal validiert istFertig() jedoch nicht nur ein einzelnes Formularelement, sondern schickt alle Formularelemente an Funktionen, die ermitteln, ob die Elemente richtig ausgefüllt wurden. Wir werden uns auf drei Formularelemente konzentrieren: adresse enthält die E-Mail-Adresse des Anwenders, derName den Namen des Besuchers und meinung den Inhalt der Nachricht.

Validierung

Die Funktion istFertig(), die Sie im Beispiel 4-9 sehen, benötigt zwei weitere Funktionen, die bestimmte Formularelemente prüfen: istEmail() ermittelt, ob die E-Mail-Adresse gültig ist, und istAusgefuellt() stellt sicher, daß kein Formularelement leer gelassen wurde. Sofern Sie diese anderen Funktionen definiert haben, können Sie nun die Master-Funktion istFertig() schreiben, die sie ausführt.

Boolesche Werte

In der Programmierung werden die Wörter true und false als Boolesche Werte bezeichnet. Ein nützlicher Aspekt der Booleschen Werte ist, daß man sie abkürzen kann, wenn man mit ihnen in einer if-Anweisung ermittelt, ob etwas wahr oder falsch ist. Die Funktion istEmail() gibt z.B. einen Booleschen Wert zurück, nachdem sie ermittelt hat, ob adresse eine gültige E-Mail-Adresse ist oder nicht. Dafür ist die folgende if-Anweisung zuständig:

if (istEmail(form.adresse) == false)

Diese if-Anweisung läßt sich auch kürzer schreiben:

if (!istEmail(form.adresse))

Das Ausrufezeichen (!) vor der Funktion ist einfach nur eine kurze Art zu sagen: »Falls dies false ist...«

Mit einer ähnlichen Kurzform kann man prüfen, ob etwas true ist. Hier sehen Sie die lange Version:

if (istEmail(form.adresse) == true)

Und dies ist die Kurzform:

if (istEmail(form.adresse))

Wenn man nichts als einen Wert als if-Bedingung angibt, dann weiß die if-Anweisung, daß sie prüfen soll, ob dieser Wert true ist.

Natürlich geht es auch ohne diese Kurzform; da sie im Internet aber in vielen Skripten verwendet wird, ist es nützlich, ihre Bedeutung zu kennen.

Boolesche Werte In der Programmierung werden die Wörter true und false als Boolesche Werte bezeichnet. Ein nützlicher Aspekt der Booleschen Werte ist, daß man sie abkürzen kann, wenn man mit ihnen in einer if-Anweisung ermittelt, ob etwas wahr oder falsch ist. Die Funktion istEmail() gibt z.B. einen Booleschen Wert zurück, nachdem sie ermittelt hat, ob adresse eine gültige E-Mail-Adresse ist oder nicht. Dafür ist die folgende if-Anweisung zuständig: if (istEmail(form.adresse) == false) Diese if-Anweisung läßt sich auch kürzer schreiben: if (!istEmail(form.adresse)) Das Ausrufezeichen (!) vor der Funktion ist einfach nur eine kurze Art zu sagen: »Falls dies false ist...« Mit einer ähnlichen Kurzform kann man prüfen, ob etwas true ist. Hier sehen Sie die lange Version: if (istEmail(form.adresse) == true) Und dies ist die Kurzform: if (istEmail(form.adresse)) Wenn man nichts als einen Wert als if-Bedingung angibt, dann weiß die if-Anweisung, daß sie prüfen soll, ob dieser Wert true ist. Natürlich geht es auch ohne diese Kurzform; da sie im Internet aber in vielen Skripten verwendet wird, ist es nützlich, ihre Bedeutung zu kennen.

Beispiel 4-9: Die Master-Funktion istFertig()

 function istFertig(form) {
     if (istEmail(form.adresse) == false) {    // Echte E-Mail-Adresse?
         alert("Bitte geben Sie eine gültige E-Mail-Adresse ein.");
         form.adresse.focus();
         return false;
     }
 
     if (istAusgefuellt(form.derName) == false) {    // Vollständiger Name?
         alert("Bitte tragen Sie Ihren Namen ein.");
         form.derName.focus();
         return false;
     }
 
     if (istAusgefuellt(form.meinung) == false) {    // Eine Nachricht?
         alert("Bitte tragen Sie Ihre Meinung ein.");
         form.meinung.focus();
         return false;
     }
 
     return true;
 }

Wie in der vorherigen Validierungsfunkion (Beispiel 4-6) deklariert die Funktion istFertig() im Beispiel 4-9 zuerst mit dem Argument form die Funktion. Der Rest der Funktion besteht aus drei if-Anweisungen, die jeweils eine andere Funktion ausführen.

Die erste if-Anweisung führt die Funktion istEmail() aus, die ermittelt, ob ein Formularelement eine ordentliche E-Mail-Adresse enthält. Damit istEmail() überhaupt etwas machen kann, muß sie ein Formularelement prüfen. In diesem Skript haben wir istEmail() das Element adresse des Formulars übergeben, also das Element, in das der Anwender eine E-Mail-Adresse eingibt.

istEmail() versucht zu ermitteln, ob adresse eine gültige E-Mail-Adresse enthält, wobei eine gültige E-Mail-Adresse sowohl das Symbol @ als auch mindestens einen Punkt enthält. Falls adresse gültig ist, gibt istEmail() den Wert true zurück, und die Validierung wird fortgesetzt. Falls der Anwender in dieses Feld keine gültige EMail-Adresse eingegeben hat, werden die nächsten drei Codezeilen in der if-Anweisung ausgeführt. Dieser Code zeigt ein Mitteilungsfenster an, das den Anwender auffordert, eine zulässige E-Mail-Adresse einzugeben, bringt den Anwender mit focus() zum Element adresse und hält den Übermittlungsvorgang dann an, indem er false zurückgibt.

Die beiden anderen if-Anweisungen führen die Funktion istAusgefuellt() aus, die prüft, ob die Elemente derName und meinung ausgefüllt wurden. Falls eine dieser Prüfungen negativ ausfällt, wird ein Mitteilungsfenster angezeigt, der Cursor in das Formular gesetzt und der Übermittlungsvorgang angehalten. Verlaufen beide Prüfungen erfolgreich, so ist der gesamte Validierungsprozeß erfolgreich abgeschlossen. In diesem Fall gibt das Skript true zurück, und die Formularübermittlung wird fortgesetzt.

Das ist keine E-Mail-Adresse!

So weit, so gut. Wie überprüfen die Validierungsfunktionen nun aber, ob der Anwender gültige Daten eingegeben hat? Um diese Frage zu beantworten, sehen wir uns die im Beispiel 4-10 gezeigte Funktion istEmail() an.

Beispiel 4-10: Die Funktion istEmail()

 function istEmail(elm) {
     if (elm.value.indexOf("@") != "-1" &&
         elm.value.indexOf(".") != "-1") {
         return true;
     }
     else {
         return false;
     }
 }

Wenn Sie sich diese Funktion genauer ansehen, fragen Sie sich vielleicht, wo die Variable elm herkommt. Denken Sie daran, daß istEmail() nur etwas machen kann, wenn Sie ihr ein Formularelement zum Prüfen übergeben. In der Funktion istFertig() (Beispiel 4-9) wird das Element adresse an istEmail() übergeben.

Wenn das Formularelement bei der Funktion istEmail() eintrifft, erhält es einen neuen, kürzeren Namen: elm (für Element). Wir brauchen nun also nicht mehr den vollständigen Namen des Elements adresse zu verwenden (document.mailFormular.adresse), sondern können es einfach als elm bezeichnen. Dasselbe gilt für alle Formularelemente, die Sie an istEmail() übergeben können. Dieses Übergeben von Variablen und Formularelementen hat einen guten Grund: Sie können istEmail() immer wieder verwenden, um verschiedene Formularelemente in verschiedenen Formularen zu überprüfen.

Die Funktion istEmail() nimmt das Formularelement entgegen, das Sie ihr übergeben, und überprüft es auf eine gültige E-Mail-Adresse. Dafür sucht sie nach dem Zeichen @ und einem Punkt. Falls @ und ein Punkt vorhanden sind, enthält das Element eine E-Mail-Adresse, und die Funktion gibt true zurück. Falls istEmail() kein @ oder keinen Punkt findet, gibt sie an die if-Anweisung, von der sie ausgeführt wird, false zurück und hält den Übermittlungsvorgang damit an.

Eine gültige E-Mail-Adresse kann alles von billg@microsoft.com bis hin zu niemand@nirgendwo.de sein. Wichtig ist, daß istEmail() sicherstellt, daß das Formularelement, das Sie ihr übergeben, etwas in der Form einer E-Mail-Adresse enthält. Sie wären überrascht, wie viele Menschen, die das E-Mail-Feld ansonsten ignorieren würden, ihre echte Adresse angeben, sobald diese Art der Validierung verwendet wird. (Denken Sie jedoch daran, daß eine falsche »E-Mail-Adresse« wie z.B. x@y.z diese Prüfung ebenfalls besteht, man damit also nicht prüfen kann, ob eine E-Mail-Adresse tatsächlich echt ist.)

Die Funktion istEmail() verwendet eine gebräuchliche JavaScript-Zeichenkettenmethode namens indexOf(), um den Wert des Formularelements zu durchsuchen. Hier sehen Sie ein Beispiel für ihre Funktionsweise. Nehmen wir z.B. an, wir haben die Variable frage, die den Satz »Wirst Du mich finden?« durchsucht:

 var frage = "Wirst Du mich finden?";

Nun können wir den Satz mit indexOf() durchsuchen. Um nach dem Wort »mich« zu suchen, wenden wir die Methode indexOf() mit einer Suche nach »mich« auf die Variablen frage an:

 var ort = frage.indexOf("mich");

Was erhalten Sie dadurch? Die Zahl 14. indexOf() gibt die Position des Wortes (seines ersten Zeichens) in der Zeichenkette zurück.

Nun haben Sie die Zeichen vielleicht gerade nachgezählt und festgestellt, daß das »m« in »mich« das fünfzehnte Zeichen in der Zeichenkette ist. Warum gibt nun also indexOf() 14 zurück? Eine der Eigentümlichkeiten von JavaScript (wie auch der meisten anderen Programmiersprachen) besteht darin, daß es bei null (0) zu zählen beginnt. Anders ausgedrückt: Das erste Zeichen, »W«, ist das nullte Zeichen in der Zeichenkette. Wenn Sie bei 0 zu zählen beginnen, werden Sie feststellen, daß »m« tatäschlich das vierzehnte Zeichen im Satz ist.

Mit indexOf() können Sie die Position jedes Zeichens in einer Zeichenkette ermitteln. Und was geschieht, wenn indexOf() »mich« in frage nicht findet? Dann gibt die Funktion den Wert -1 zurück.

Die if-Anweisung in istEmail() stützt sich bei ihrer Arbeit auf dieses Verhalten. Falls die vom Anwender eingegebene E-Mail-Adresse das Zeichen @ enthält, wird eine Suche nach »@« nicht -1 zurückgeben. Anders ausgedrückt: Falls der zurückgegebene Wert nicht -1 ist, muß die E-Mail-Adresse an irgendeiner Stelle das Zeichen @ enthalten. Auf ähnliche Weise sucht die nächste Zeile der if-Anweisung mit indexOf() nach einem Punkt.

Falls der vom Anwender eingegebene Wert beide Prüfungen besteht, gibt istEmail() den Wert true zurück (denken Sie daran, daß && »und« bedeutet). Anderenfalls gibt die Funktion false zurück.

Die Leerstellen füllen

Nachdem feststeht, daß das Feld adresse eine gültige E-Mail-Adresse enthält, prüft istFertig() (Beispiel 4-9) die übrigen Elemente des Formulars: derName und meinung. Hierfür verwendet es die Funktion istAusgefuellt(), die einfach ermittelt, ob ein Formularelement leer ist. Den entsprechenden Code sehen Sie im Beispiel 4-11.

Beispiel 4-11: Die Funktion istAusgefuellt()

 function istAusgefuellt(elm) {
     if (elm.value == "" || elm.value == null) {
         return false;
     }
     else {
         return true;
     }
 }

Da istAusgefuellt() nur prüft, ob überhaupt Inhalt vorhanden ist, ist sie eine einfache Funktion. Wenn ein Formularelement wie z.B. derName an istAusgefuellt() übergeben wird, erhält es ebenso wie bei istEmail() den einfacheren Namen elm. Anschließend prüft istAusgefuellt() das Element und ermittelt, ob es leer ist (leere Anführungszeichen). Falls das Element nichts enthält, gibt istAusgefuellt() den Wert false zurück; anderenfalls gibt es true zurück.

Das Gesamtbild

Nachdem Sie nun wissen, wie einzelne Elemente validiert werden, können wir zurücktreten und das Gesamtbild betrachten. Beispiel 4-12 zeigt das vollständige Skript für unser E-Mail-Formular. Wie Sie sehen, sind istEmail(), istAusgefuellt() und istFertig() im head des Dokuments definiert.

Beispiel 4-12: Das vollständige Skript für die Formularvalidierung

 <html>
 <head>
 <title>Wir wollen wissen, was Sie denken!</title>
 <script>
 // Prüfe auf eine gültige E-Mail-Adresse: suche nach @ und .
 function istEmail(elm) {
     if (elm.value.indexOf("@") != "-1" &&
         elm.value.indexOf(".") != "-1") {
         return true;
     }
     else {
         return false;
     }
 }
 
 // Prüfe auf leere Felder.
 function istAusgefuellt(elm) {
     if (elm.value == "" || elm.value == null) {
         return false;
     }
     else {
         return true;
     }
 }
 // Prüfe das gesamte Formular.
 function istFertig(form) {
     if (istEmail(form.adresse) == false) {     // Echte E-Mail-Adresse?
         alert("Bitte geben Sie eine gültige E-Mail-Adresse ein.");
         form.adresse.focus();
         return false;
     }
 
     if (istAusgefuellt(form.derName) == false) {    // Vollständiger Name?
         alert("Bitte tragen Sie Ihren Namen ein.");
         form.derName.focus();
         return false;
     }
 
     if (istAusgefuellt(form.meinung) == false) {    // Eine Nachricht?
         alert("Bitte tragen Sie Ihre Meinung ein.");
         form.meinung.focus();
         return false;
     }
 
     return true;
 }
 </script>
 </head>
 
 <body>
 <form name="mailFormular" action="/cgi-bin/mailform.cgi" method="post"
       onSubmit = "return istFertig(this);">
 <p>Ihr Name: <input name="derName" type="text"></p>
 <p>Ihre E-Mail-Adresse: <input name="adresse" type="text"></p>
 <p>Ihre Meinung:</p>
 <p><textarea name="meinung" rows="3" cols="50" wrap="wrap"></textarea></p>
 <p><input type="submit" value="Abschicken">
 <input type="reset" value="Zurücksetzen"></p>
 </form>
 </body>
 </html>

Fassen wir noch einmal zusammen:

1. Wenn der Anwender Abschicken anklickt, wird das Formular zur Validierung an istFertig() übergeben.

2. istFertig() überprüft die einzelnen Elemente des Formulars mit einer Folge von if-Anweisungen. Jede dieser if-Anweisungen übergibt ein bestimmtes Formularelement (z.B. adresse) an eine bestimmte Validierungsfunktion (z.B. istEmail()). Falls das Formularelement die Prüfung besteht, macht die Validierung mit dem nächsten Element weiter. Falls es scheitert, zeigt istFertig() ein Mitteilungsfeld an, bringt den Anwender zum problematischen Element und gibt false zurück, um das Abschicken des Formulars abzubrechen. (Die Abbildung 4-7 zeigt die verschiedenen Mitteilungsfelder, die dieses Skript anzeigen kann.)

3. Falls alle Elemente die Prüfung bestehen, gibt istFertig() den Wert true zurück, und das Formular wird an das CGI-Skript auf dem Server geschickt.

Abbildung 4-7 : Fehlermeldungen bei der Validierung

Wenn Sie Ihre eigenen Formulare validieren möchten, brauchen Sie nur istFertig() zu ändern. Die Validierungsfunktionen sind so entworfen, daß sie immer funktionieren. Die Namen der Formularelemente müssen Sie so verändern, daß sie mit den Namen in Ihrem Formular übereinstimmen. Passen Sie auch die Nachrichten, die an die verschiedenen alert()-Funktionen übergeben werden, an Ihre Anwendung an. Natürlich können Sie weitere if-Anweisungen hinzufügen, um zusätzliche Formularelemente zu prüfen. Eventuell sollten Sie auch einige der weiteren Validierungsfunktionen verwenden, die wir im folgenden Abschnitt besprechen.

Überprüfungen

Für die Leser, die gerne experimentieren, zeigen wir hier einige weitere Funktionen, die bei der Validierung von Formularen nützlich sein können. Alle diese Funktionen können Sie ebenso wie istEmail() und istAusgefuellt() ohne Änderungen direkt einsetzen.

Ist es eine ganze Zahl?

Mit der im Beispiel 4-13 gezeigten Funktion istInt() können Sie den Wert eines Formularelements prüfen, um zu ermitteln, ob er eine ganze Zahl (Integer) ohne Vorzeichen ist. Ist er keine ganze Zahl, so gibt die Funktion false zurück.

Beispiel 4-13: Die Funktion istInt()

 function istInt(elm) {
     if (elm.value == "") {
         return false;
     }
     for (var i = 0; i < elm.value.length; i++) {
         if (elm.value.charAt(i) < "0" || elm.value.charAt(i) > "9") {
             return false;
         }
     }
     return true;
 }

istInt() stellt zuerst sicher, daß das Element nicht leer ist (""). Dann prüft sie mit einer for-Schleife¹ jedes Zeichen des Elementwertes daraufhin, ob es eine Ziffer zwischen 0 und 9 ist. Dafür verwendet istInt() die Methode charAt(). Falls das Zeichen eine Ziffer zwischen 0 und 9 ist, geht die Funktion zum nächsten Zeichen weiter. Anderenfalls gibt sie false zurück und zeigt damit an, daß der Wert keine ganze Zahl ohne Vorzeichen ist. Da »-« und »+« nicht zwischen 0 und 9 liegen, können wir sicher sein, daß wir es mit keiner ganzen Zahl mit Vorzeichen zu tun haben. Und da auch der Punkt (».«) nicht zwischen 0 und 9 liegt, wissen wir, daß es sich um eine ganze Zahl und keine Fließkommazahl handelt.

Sind nur alphabetische Zeichen vorhanden?

Die im Beispiel 4-14 gezeigte Funktion istBuchstabe() prüft den Wert eines Formularelements, um zu ermitteln, ob es ausschließlich alphabetische Zeichen enthält (d.h. Zeichen von »a« bis einschließlich »z« und von »A« bis einschließlich »Z«).

Beispiel 4-14: Die Funktion istBuchstabe()

 function istBuchstabe(elm) {
     if (elm.value == "") {
         return false;
     }
     for (var i = 0; i < elm.value.length; i++) {
         if ((elm.value.charAt(i) < "a" || elm.value.charAt(i) > "z") &&
            (elm.value.charAt(i) < "A" || elm.value.charAt(i) > "Z")) {
             return false;
         }
     }
     return true;
 }

istBuchstabe() unterscheidet sich nicht wesentlich von istInt(). Zuerst stellt die Funktion istBuchstabe() sicher, daß das Element nicht leer ist, und dann prüft sie mit einer for-Schleife, ob alle Zeichen des Elementwertes sich im Bereich von »a« bis »z« oder von »A« bis »Z« befinden. Falls ein Zeichen außerhalb dieser Bereiche liegt, ist es kein alphabetisches Zeichen, und istBuchstabe() gibt false zurück.

Ist es eine Telefonnummer?

Die in Beispiel 4-15 gezeigte Funktion istTelefon() gibt für jede Telefonnummer true zurück.

Beispiel 4-15: Die Funktion istTelefon()

 function istTelefon(elm) {
     if (elm.value.length > 22) {
         return false;
     }
     for (var i = 0; i < elm.value.length; i++) {
         if ((elm.value.charAt(i) < "0" || elm.value.charAt(i) > "9") &&
             elm.value.charAt(i) != "-" && elm.value.charAt(i) != "/" &&
             elm.value.charAt(i) != "(" && elm.value.charAt(i) != ")" &&
             elm.value.charAt(i) != "+") {
             return false;
         }
     }
     return true;
 }

istTelefon() stellt zuerst sicher, daß die Länge des Elementwertes nicht größer als 22 ist, da eine gültige Telefonnummer mit Vorwahl und Bindestrichen, Klammern usw. nicht mehr als 22 Zeichen haben sollte. Dann prüft die Funktion mit einer for-Schleife alle Zeichen im Element. Sie prüft, ob das Zeichen eine Ziffer zwischen 0 und 9, ein Bindestrich, ein Schrägstrich, eine Klammer oder ein Pluszeichen ist. Falls irgendein unerwartetes Zeichen auftritt, gibt istTelefon() den Wert false zu-rück, und wenn alles paßt, gibt sie true zurück.

Reguläre Ausdrücke

In den Validierungsfunktionen in diesem Kapitel haben wir verschiedene Zeichenketten-Methoden wie z.B. indexOf() und charAt() verwendet, um bestimmte Aspekte des Elementwertes zu prüfen. Es gibt noch eine andere Möglichkeit, eine Zeichenkette mit einem bestimmten Muster zu vergleichen. Dafür verwendet man die sogenannten regulären Ausdrücke, die in JavaScript 1.2 neu eingeführt wurden. Ein regulärer Ausdruck ermöglicht es, ein Wort, eine Zahl oder eine andere Zeichenkette innerhalb einer anderen Zeichenkette zu vergleichen. Reguläre Ausdrücke werden für ganz unterschiedliche Zwecke verwendet, in JavaScript aber meist bei der Validierung von Daten.

Die Syntax für reguläre Ausdrücke wirkt manchmal recht abschreckend. Sehen wir uns zunächst also ein einfaches Beispiel an: Wir implementieren die Validierungsfunktion istInt() mit einem regulären Ausdruck:

function istInt(elm) { var muster = /[^0-9]/; if (muster.test(elm.value)) { return false; } else { return true; } }

Zuerst definiert diese Funktion eine Variable namens muster, die den regulären Ausdruck repräsentiert, nach dem wir suchen möchten. In diesem Fall suchen wir nach irgendeinem Zeichen, das keine Ziffer zwischen 0 und 9 ist. Falls wir ein solches Zeichen finden, wissen wir, daß das Formularelement keine ganze Zahl ohne Vorzeichen enthält. Der reguläre Ausdruck sieht folgendermaßen aus:

var muster = /[^0-9]/;

Ebenso wie Anführungszeichen den Anfang und das Ende einer Zeichenkette markieren, kennzeichnen die Schrägstriche den Anfang und das Ende des regulären Ausdrucks. Die eckigen Klammern besagen, daß wir einen Zeichenbereich angeben, in diesem Fall den zwischen 0 und 9. Das Auslassungszeichen (^) gibt an, daß wir den Wertebereich negieren möchten, d.h., daß wir jedes Zeichen finden möchten, das sich nicht im Bereich von 0 bis 9 befindet. Wie Sie sehen, ist dies eine sehr knappe Syntax für die Prüfung auf eine ganze Zahl ohne Vorzeichen.

Nachdem wir nun den regulären Ausdruck definiert haben, müssen wir ihn mit dem Wert des Formularelements vergleichen. Für diesen Zweck hat jeder reguläre Ausdruck die Methode test(), die folgendermaßen verwendet wird:

muster.test(elm.value)

test() gibt true zurück, falls das Zeichenketten-Argument, das ihr übergeben wird, (in diesem Fall elm.value) den regulären Ausdruck (muster) enthält. Wenn test() den Wert true zurückgibt, also ein Zeichen gefunden hat, das außerhalb des Bereichs von 0 bis 9 liegt, muß istInt() den Wert false zurückgeben. Gibt test() hingegen false zurück, so wissen wir, daß wir eine ganze Zahl ohne Vorzeichen haben, und istInt() gibt true zurück.

Bei regulären Ausdrücken müssen Sie vor allem das richtige Muster definieren. Für die Validierungsfunktion istBuchstabe() könnten wir z.B. das folgende Muster verwenden:

var muster = /[^a-zA-Z]/;

Damit suchen wir alle Zeichen, die außerhalb des Bereichs von »a« bis »z« oder von »A« bis »Z« liegen.

Für die Prüffunktion für Telefonnummern könnten wir das folgende Muster verwenden:

var muster = /[0-9]{3}-[0-9]{3}-[0-9]{4}/;

Damit finden wir alle Zeichen, die weder eine Ziffer noch eine Klammer, ein Bindestrich, ein Pluszeichen oder ein Schrägstrich sind.

Das Muster für istEmail() sieht folgendermaßen aus:

var muster = /^[a-zA-Z0-9\- ]+\@[a-zA-Z0-9 \-\.] +\.([a-zA-Z]{2,3})$/;

Trotz der abschreckenden Syntax sucht dieser reguläre Ausdruck wesentlich wirkungsvoller nach einer E-Mail-Adresse als die Funktion istEmail(). Am Anfang der Zeichenkette sucht er nach einem oder mehreren alphanumerischen Zeichen einschließlich - und _ (für den Benutzernamen). Danach sucht er zuerst nach einem @ und dann wieder nach einem oder mehreren alphanumerischen Zeichen einschließlich -, _ und . (für den Domänen- und eventuell einen Rechnernamen). Zuletzt sucht er nach zwei oder drei alphanumerischen Zeichen (für die Top-Level-Domäne, z.B. »com« oder »uk«).

Die syntaktischen Einzelheiten der regulären Ausdrücke gehen ganz offensichtlich über den Rahmen dieses Buches hinaus. Wir zeigen diese Muster hier nur, damit Sie einen regulären Ausdruck erkennen, wenn Sie ihn sehen. Im Idealfall ist jeder reguläre Ausdruck sorgfältig dokumentiert, so daß Sie nicht selbst herausfinden müssen, wonach er sucht. Falls Sie dennoch auf Schwierigkeiten stoßen, finden Sie in David Flanagans Buch JavaScript: Das umfassende Referenzwerk (O'Reilly) ausführliche Informationen zu den regulären Ausdrükken von JavaScript.

Reguläre Ausdrücke In den Validierungsfunktionen in diesem Kapitel haben wir verschiedene Zeichenketten-Methoden wie z.B. indexOf() und charAt() verwendet, um bestimmte Aspekte des Elementwertes zu prüfen. Es gibt noch eine andere Möglichkeit, eine Zeichenkette mit einem bestimmten Muster zu vergleichen. Dafür verwendet man die sogenannten regulären Ausdrücke, die in JavaScript 1.2 neu eingeführt wurden. Ein regulärer Ausdruck ermöglicht es, ein Wort, eine Zahl oder eine andere Zeichenkette innerhalb einer anderen Zeichenkette zu vergleichen. Reguläre Ausdrücke werden für ganz unterschiedliche Zwecke verwendet, in JavaScript aber meist bei der Validierung von Daten. Die Syntax für reguläre Ausdrücke wirkt manchmal recht abschreckend. Sehen wir uns zunächst also ein einfaches Beispiel an: Wir implementieren die Validierungsfunktion istInt() mit einem regulären Ausdruck: function istInt(elm) { var muster = /[^0-9]/; if (muster.test(elm.value)) { return false; } else { return true; } } Zuerst definiert diese Funktion eine Variable namens muster, die den regulären Ausdruck repräsentiert, nach dem wir suchen möchten. In diesem Fall suchen wir nach irgendeinem Zeichen, das keine Ziffer zwischen 0 und 9 ist. Falls wir ein solches Zeichen finden, wissen wir, daß das Formularelement keine ganze Zahl ohne Vorzeichen enthält. Der reguläre Ausdruck sieht folgendermaßen aus: var muster = /[^0-9]/; Ebenso wie Anführungszeichen den Anfang und das Ende einer Zeichenkette markieren, kennzeichnen die Schrägstriche den Anfang und das Ende des regulären Ausdrucks. Die eckigen Klammern besagen, daß wir einen Zeichenbereich angeben, in diesem Fall den zwischen 0 und 9. Das Auslassungszeichen (^) gibt an, daß wir den Wertebereich negieren möchten, d.h., daß wir jedes Zeichen finden möchten, das sich nicht im Bereich von 0 bis 9 befindet. Wie Sie sehen, ist dies eine sehr knappe Syntax für die Prüfung auf eine ganze Zahl ohne Vorzeichen. Nachdem wir nun den regulären Ausdruck definiert haben, müssen wir ihn mit dem Wert des Formularelements vergleichen. Für diesen Zweck hat jeder reguläre Ausdruck die Methode test(), die folgendermaßen verwendet wird: muster.test(elm.value) test() gibt true zurück, falls das Zeichenketten-Argument, das ihr übergeben wird, (in diesem Fall elm.value) den regulären Ausdruck (muster) enthält. Wenn test() den Wert true zurückgibt, also ein Zeichen gefunden hat, das außerhalb des Bereichs von 0 bis 9 liegt, muß istInt() den Wert false zurückgeben. Gibt test() hingegen false zurück, so wissen wir, daß wir eine ganze Zahl ohne Vorzeichen haben, und istInt() gibt true zurück. Bei regulären Ausdrücken müssen Sie vor allem das richtige Muster definieren. Für die Validierungsfunktion istBuchstabe() könnten wir z.B. das folgende Muster verwenden: var muster = /[^a-zA-Z]/; Damit suchen wir alle Zeichen, die außerhalb des Bereichs von »a« bis »z« oder von »A« bis »Z« liegen. Für die Prüffunktion für Telefonnummern könnten wir das folgende Muster verwenden: var muster = /[0-9]{3}-[0-9]{3}-[0-9]{4}/; Damit finden wir alle Zeichen, die weder eine Ziffer noch eine Klammer, ein Bindestrich, ein Pluszeichen oder ein Schrägstrich sind. Das Muster für istEmail() sieht folgendermaßen aus: var muster = /^[a-zA-Z0-9\- ]+\@[a-zA-Z0-9 \-\.] +\.([a-zA-Z]{2,3})$/; Trotz der abschreckenden Syntax sucht dieser reguläre Ausdruck wesentlich wirkungsvoller nach einer E-Mail-Adresse als die Funktion istEmail(). Am Anfang der Zeichenkette sucht er nach einem oder mehreren alphanumerischen Zeichen einschließlich - und _ (für den Benutzernamen). Danach sucht er zuerst nach einem @ und dann wieder nach einem oder mehreren alphanumerischen Zeichen einschließlich -, _ und . (für den Domänen- und eventuell einen Rechnernamen). Zuletzt sucht er nach zwei oder drei alphanumerischen Zeichen (für die Top-Level-Domäne, z.B. »com« oder »uk«). Die syntaktischen Einzelheiten der regulären Ausdrücke gehen ganz offensichtlich über den Rahmen dieses Buches hinaus. Wir zeigen diese Muster hier nur, damit Sie einen regulären Ausdruck erkennen, wenn Sie ihn sehen. Im Idealfall ist jeder reguläre Ausdruck sorgfältig dokumentiert, so daß Sie nicht selbst herausfinden müssen, wonach er sucht. Falls Sie dennoch auf Schwierigkeiten stoßen, finden Sie in David Flanagans Buch JavaScript: Das umfassende Referenzwerk (O'Reilly) ausführliche Informationen zu den regulären Ausdrükken von JavaScript.

Sie brauchen die Syntax der for-Schleife hier nicht zu verstehen; damit befassen wir uns in Kapitel 5. Hier müssen Sie nur wissen, daß Sie damit alle Zeichen in dem Wert prüfen können, den der Anwender eingegeben hat.

O'Reilly Home | O'Reilly-Partnerbuchhandlungen | Bestellinformationen
Kontakt | Über O'Reilly | Datenschutz


	Webdesign mit JavaScript Nick Heinle & Bill Pena 1.Auflage Juli 2002 ISBN 3-89721-275-7 282 Seiten