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 Eigenschafttype, 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 Funktionpruefen(). <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 dertype-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 dievalue-Eigenschaft des Formularelements (zur Erinnerung: Es steht in der Variableni) überprüft. Falls keine Eingabe erfolgt, wird dasname-Attribut des Eingabefelds (es steht in der Eigenschaftname) 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 dertype-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 dasname-Attribut ausgelesen (Eigenschaftname). Dann wird das dazugehörige Array von Radiobuttons daraufhin durchsucht, ob zumindest einer davon ausgewählt ist. Falls nicht, wird der Fehlerstring um dasname-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 derfor-Schleife). Inradiocheck werden diename-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: Diename-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 (dietype-Eigenschaftheißt übrigens"checkbox") nicht überprüft. Ist das dennoch erforderlich, hilft einfach ein Blick auf die Eigenschaftchecked: Ist diesefalse, 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 dietype-Eigenschaftdes Formularelements entweder den Wert"select-one" oder den Wert"select-multiple" hat, je nachdem, ob der HTML-Parametermultiple gesetzt worden ist oder nicht. Die EigenschaftselectedIndexmuss ü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> | 
