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>