Galileo Computing < openbook > Galileo Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Galileo Computing
ISBN 3-89842-859-1
gp Kapitel 9 Formulare
  gp 9.1 Überprüfung auf Vollständigkeit
    gp 9.1.1 Allgemeiner Aufbau
    gp 9.1.2 Texteingabefelder
    gp 9.1.3 Radiobuttons
    gp 9.1.4 Checkboxen
    gp 9.1.5 Auswahllisten
    gp 9.1.6 Fehlermeldung ausgeben
    gp 9.1.7 Konstruktive Vorschläge
  gp 9.2 Automatische Überprüfung
    gp 9.2.1 Texteingabefelder
    gp 9.2.2 Radiobuttons
    gp 9.2.3 Checkboxen
    gp 9.2.4 Auswahllisten
    gp 9.2.5 Zusammenfassung
  gp 9.3 Anwendungsmöglichkeiten für Formulare
    gp 9.3.1 Währungsrechner
    gp 9.3.2 Währungsrechner, Teil 2
    gp 9.3.3 Formularfelder für die Textausgabe nutzen
    gp 9.3.4 Navigation mit Auswahllisten
  gp 9.4 Anwendungsbeispiel: Fensteroptionen
  gp 9.5 Daten behalten
    gp 9.5.1 Das Eingabeformular
    gp 9.5.2 Die Ausgabeseite
  gp 9.6 Dynamische Auswahllisten
    gp 9.6.1 Ein erster Ansatz
    gp 9.6.2 Ein fortgeschrittener Ansatz
  gp 9.7 Überprüfungsfunktionen
    gp 9.7.1 Ganze Zahlenwerte
    gp 9.7.2 Dezimalzahlen
    gp 9.7.3 Telefonnummern
    gp 9.7.4 E-Mail-Adressen
    gp 9.7.5 In Zahlenwerte umwandeln
  gp 9.8 Reguläre Ausdrücke
    gp 9.8.1 Kurzeinführung
    gp 9.8.2 Ein Objekt erzeugen
    gp 9.8.3 Mit dem Objekt arbeiten


Galileo Computing

9.2 Automatische Überprüfung  downtop

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>

Galileo Computing

9.2.1 Texteingabefelder  downtop

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";
   }
}

Galileo Computing

9.2.2 Radiobuttons  downtop

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:

gp  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.
gp  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.
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";
      }
   }
}

Galileo Computing

9.2.3 Checkboxen  downtop

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.


Galileo Computing

9.2.4 Auswahllisten  downtop

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";
   }
}

Galileo Computing

9.2.5 Zusammenfassung  toptop

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
  
  Zum Katalog
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript und AJAX - Das Video-Training






 JavaScript und AJAX -
 Das Video-Training


Zum Katalog: Webseiten programmieren und gestalten






 Webseiten
 programmieren
 und gestalten


Zum Katalog: XHTML, HTML und CSS






 XHTML, HTML und CSS


Zum Katalog: CSS-Praxis






 CSS-Praxis


Zum Katalog: AJAX






 AJAX


Zum Katalog: PHP 5 und MySQL 5






 PHP 5 und MySQL 5


Zum Katalog: TYPO3 4.0






 TYPO3 4.0


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




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