Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
1 Einleitung
2 Webbrowser
3 JavaScript einbauen
4 Programmieren mit JavaScript
5 Datum
6 Zufall
7 Browserinformationen
8 Fenster
9 Formulare
10 Frames und Iframes
11 Grafiken
12 Cookies
13 Objekte und Arrays
14 Ereignisbehandlung
15 Fehlerbehandlung
16 DOM
17 DHTML und CSS
18 AJAX
19 XML
20 Web Services
21 AJAX-Frameworks
22 Plugins
23 Multimedia
24 Java
25 Serverseitige Technologien
26 JavaScript goes .NET
27 Code schützen
28 Top Secret: Passwortschutz
29 Signierte Skripte
30 JavaScript und Sicherheit
31 Navigation
32 Warenkorb
33 JavaScript-Bibliotheken
34 Referenz
35 Quellen im Web
36 Die Zukunft von JavaScript
Index
Download: - ZIP, ca. 9,2 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Computing / <openbook> / JavaScript und AJAX | vor >>
JavaScript und AJAX von Christian Wenz Das umfassende Handbuch
JavaScript und AJAX 839 S., mit DVD, 39,90 Euro Galileo Computing ISBN 3-89842-859-1 |
| Kapitel 9 Formulare
|  | 9.1 Überprüfung auf Vollständigkeit
|  |  | 9.1.1 Allgemeiner Aufbau
|  |  | 9.1.2 Texteingabefelder
|  |  | 9.1.3 Radiobuttons
|  |  | 9.1.4 Checkboxen
|  |  | 9.1.5 Auswahllisten
|  |  | 9.1.6 Fehlermeldung ausgeben
|  |  | 9.1.7 Konstruktive Vorschläge
|  | 9.2 Automatische Überprüfung
|  |  | 9.2.1 Texteingabefelder
|  |  | 9.2.2 Radiobuttons
|  |  | 9.2.3 Checkboxen
|  |  | 9.2.4 Auswahllisten
|  |  | 9.2.5 Zusammenfassung
|  | 9.3 Anwendungsmöglichkeiten für Formulare
|  |  | 9.3.1 Währungsrechner
|  |  | 9.3.2 Währungsrechner, Teil 2
|  |  | 9.3.3 Formularfelder für die Textausgabe nutzen
|  |  | 9.3.4 Navigation mit Auswahllisten
|  | 9.4 Anwendungsbeispiel: Fensteroptionen
|  | 9.5 Daten behalten
|  |  | 9.5.1 Das Eingabeformular
|  |  | 9.5.2 Die Ausgabeseite
|  | 9.6 Dynamische Auswahllisten
|  |  | 9.6.1 Ein erster Ansatz
|  |  | 9.6.2 Ein fortgeschrittener Ansatz
|  | 9.7 Überprüfungsfunktionen
|  |  | 9.7.1 Ganze Zahlenwerte
|  |  | 9.7.2 Dezimalzahlen
|  |  | 9.7.3 Telefonnummern
|  |  | 9.7.4 E-Mail-Adressen
|  |  | 9.7.5 In Zahlenwerte umwandeln
|  | 9.8 Reguläre Ausdrücke
|  |  | 9.8.1 Kurzeinführung
|  |  | 9.8.2 Ein Objekt erzeugen
|  |  | 9.8.3 Mit dem Objekt arbeiten
## 9.2 Automatische Überprüfung Das Skript zur Überprüfung auf Vollständigkeit muss für jedes Formular neu geschrieben werden. Zwar können Sie Elemente wiederverwenden, aber etwas zusätzliche Arbeit ist immer nötig. Es ist aber möglich, die Überprüfung auch zu automatisieren. Jedes Formularelement besitzt nämlich die Eigenschaft type, die den Typ des Elements – beispielsweise Texteingabefeld, Radiobutton oder Checkbox – angibt. Man kann also den Ansatz verfolgen, in einer Schleife alle Formularelemente durchzugehen und zu überprüfen, ob sie ausgefüllt sind. Die Fehlermeldungen sind dann vielleicht nicht mehr so individuell wie im vorherigen Beispiel, aber Sie ersparen sich eine Menge Tipp- und Denkarbeit. Im Folgenden sehen Sie das Grundgerüst für die »automatische« Version der Funktion pruefen().
    <script type="text/javascript"><!--
    function pruefen(f) {  //Formular wird als Parameter übergeben
       var fehler = "";  //Variable für die Fehlermeldung
       var i;  //Enthält das jeweilige Formularelement
       for (var j=0; j<f.elements.length; j++) {
          i = f.elements[j];
          //kommt noch...
       }
       return true;
    }
    //--></script>
### 9.2.1 Texteingabefelder Der Wert der type-Eigenschaft eines Texteingabefelds ist bei einem einzeiligen Texteingabefeld "text". Er ist "password" bei einem Passwortfeld sowie "textarea" bei einem mehrzeiligen Eingabefeld. In diesem Fall wird die value-Eigenschaft des Formularelements (zur Erinnerung: Es steht in der Variablen i) überprüft. Falls keine Eingabe erfolgt, wird das name-Attribut des Eingabefelds (es steht in der Eigenschaft name) dem Fehlerstring hinzugefügt, um wenigstens eine einigermaßen aussagekräftige Fehlermeldung ausgeben zu können.
    if (i.type=="text" || i.type=="password" || i.type=="textarea") {
       if (i.value == "") {
          fehler += i.name + "\n";
       }
    }
### 9.2.2 Radiobuttons Für Radiobuttons (die Sie an der type-Eigenschaft "radio" erkennen) muss man sich eine besondere Strategie überlegen. Jeder Radiobutton ist ein eigenes Formularelement und muss nicht unbedingt ausgewählt sein. Auf die folgende Art und Weise kommt man dennoch zum Ziel:
| Wenn Sie feststellen, dass das aktuell betrachtete Formularelement ein Radiobutton ist, wird das name-Attribut ausgelesen (Eigenschaft name). Dann wird das dazugehörige Array von Radiobuttons daraufhin durchsucht, ob zumindest einer davon ausgewählt ist. Falls nicht, wird der Fehlerstring um das name-Attribut der Gruppe der Radiobuttons erweitert.
| Jeder Radiobutton wird als einzelnes Formularelement behandelt. Ist also von einer Gruppe aus fünf Radiobuttons keiner ausgewählt, werden bei der Überprüfung der fünf Radiobuttons insgesamt fünfmal Mängel gefunden – es würde also fünf Fehlermeldungen geben. Aus diesem Grund wird eine weitere Variable, radiocheck, eingeführt (und zwar außerhalb der for-Schleife). In radiocheck werden die name-Attribute bereits geprüfter Radio-Buttons, durch Leerzeichen getrennt, eingetragen. Bevor ein Radiobutton überprüft wird, muss zuerst nachgeschaut werden, ob schon einmal ein anderer Radiobutton aus dieser Gruppe betrachtet worden ist. Daraus folgt auch eine Einschränkung für das Skript: Die name-Attribute der Radiobuttons dürfen keine Leerzeichen enthalten – aber das sollte sich von selbst verstehen; ich verweise auf die Einleitung.1
    if (i.type=="radio") {
       if (radiocheck.indexOf(i.name + " "<0) {
          radiocheck += i.name + " ";
          eval("var radiogroup = f." + i.name)
          var ok = false;
          for (var k=0; k<radiogroup.length; k++) {
             if (radiogroup[k].checked) {
                ok = true;
             }
          }
          if (!ok) {
             fehler += i.name + "\n";
          }
       }
    }
### 9.2.3 Checkboxen Bei Checkboxen ist eine allgemeine Überprüfung schlecht möglich. Es ist dem Benutzer ja freigestellt, ob er eine Checkbox ankreuzt oder nicht. Jede Checkbox ist im Grunde genommen eine Ja/Nein-Frage, und somit bedeutet kein Kreuz auch eine Antwort, nämlich Nein. Aus diesem Grund werden Checkboxen (die type-Eigenschaft heißt übrigens "checkbox") nicht überprüft. Ist das dennoch erforderlich, hilft einfach ein Blick auf die Eigenschaft checked: Ist diese false, ist die Checkbox nicht ausgewählt worden. Im endgültigen Skript finden Sie den Code für diese Überprüfung in einkommentierter Form. ### 9.2.4 Auswahllisten Auswahllisten erkennt man daran, dass die type-Eigenschaft des Formularelements entweder den Wert "select-one" oder den Wert "select-multiple" hat, je nachdem, ob der HTML-Parameter multiple gesetzt worden ist oder nicht. Die Eigenschaft selectedIndex muss überprüft werden. Sie muss ungleich 0 sein. Wir nehmen einfach einmal an, dass die oberste Option einer Auswahlliste immer »Bitte wählen Sie« oder ähnlich lautet.
    if (i.type=="select-one" || i.type=="select-multiple") {
       if (i.selectedIndex == 0) {
          fehler += i.name + "\n";
       }
    }
### 9.2.5 Zusammenfassung Im Folgenden finden Sie noch einmal den gesamten Code für dieses Beispiel. Mit ihm sind Sie in der Lage, mit JavaScript jedes Formular daraufhin zu überprüfen, ob es vollständig ausgefüllt wurde. In der Praxis kommt es aber oft vor, dass nicht alle Felder Pflichtfelder sind. Viele Benutzer sind auch sehr zurückhaltend, wenn sie allzu persönliche Daten wie etwa Geburtsdatum, E-Mail-Adresse, Telefonnummer oder gar ihr Einkommen angeben müssen. Überlegen Sie sich also ganz genau, ob Sie wirklich alle Daten benötigen.
    <html>
    <head>
    <title>Formularüberprüfung</title>
    <script type="text/javascript"><!--
    function pruefen(f) {
       var fehler = "";  //Variable für die Fehlermeldung
       var radiocheck = "";  //Variable für überprüfte Radiobuttons
       var i;  //Enthält das jeweilige Formularelement
       for (var j=0; j<f.elements.length; j++) {
          i = f.elements[j];
          //Texteingabefelder
          if (i.type=="text" || i.type=="password" || i.type=="textarea") {
             if (i.value == "") {
                fehler += i.name + "\n";
             }
          }
          //Radiobuttons
          if (i.type=="radio") {
             if (radiocheck.indexOf(i.name+ " ") < 0) {
                radiocheck += i.name + " ";
                eval("var radiogroup = f." + i.name);
                var ok = false;
                for (var k=0; k<radiogroup.length; k++) {
                   if (radiogroup[k].checked) {
                      ok = true;
                   }
                }
                if (!ok) {
                   fehler += i.name + "\n";
                }
             }
          }

          //Auswahllisten
          if (i.type=="select-one" || i.type=="select-
          multiple") {
             if (i.selectedIndex == 0) {
                fehler += i.name + "\n";
             }
          }

          //Checkboxen (einkommentiert)
          //if (i.type=="checkbox") {
          //   if (i.checked == false) {
          //      fehler += i.name + "\n";
          //   }
          //}
       }
       //Fehlermeldung
       if (fehler != "") {
          alert("Bitte füllen Sie die folgenden Felder aus:
          \n" + fehler);
          return false;
       }
       return true;
    }
    //--></script>
    </head>
    <body>
    <form onsubmit="return pruefen(this);">
    ... Formularfelder kommen hierhin ...
    </form>
    </body>
    </html>
<< zurück | <top> | vor >>
Zum Katalog
JavaScript und AJAX bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| JavaScript und AJAX - Das Video-Training
| Webseiten programmieren und gestalten
| XHTML, HTML und CSS
| CSS-Praxis
| AJAX
| PHP 5 und MySQL 5
| TYPO3 4.0
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

[Galileo Computing]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de