Ich gebe Cheffchen recht das ist was für PHP und nicht für JS, aber es geht auch mit JS ich kann aber Bloß den Code mit Beschreibung und Anleitung geben ich habe keine Zeit den Code auf dein Formular umzuschreiben muss lernen für die Schule!!!
Text:
5.8.1Vollständigkeitsüberprüfung
Als Grundlage verwenden wir ein einfaches Formular, wie Sie es bereits ähnlich aus dem Kapitel 4 »HTML und CSS« kennen. Eine JavaScript-Funktion zur Überprüfung ist bereits definiert und wird im Ereignis onsubmit aufgerufen. Der Einfachheit halber verschicken wir das Formular per E-Mail und nicht per serverseitiges Skript.
Listing 5.35: Ein Beispielformular (formular.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Formular</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript"><!--
function vollst() {
}
//--></script>
</head>
<body>
<form action="mailto:
[email protected]" method="post" enctype="text/plain" onsubmit="return vollst()"
name="umfrage">
<p>Wie zufrieden sind Sie mit dem Service?</p>
<input type="radio" name="Zufriedenheit"
value="nicht" /> nicht
<input type="radio" name="Zufriedenheit"
value="relativ" /> relativ
<input type="radio" name="Zufriedenheit"
value="sehr" /> sehr zufrieden<br /><br />
<textarea name="Beschreibung" rows="10" cols="40"></textarea><br /><br />
<select name="kauf" size="2">
<option value="gel">Geltungsbedürfnis
</option>
<option value="kau">Kaufsucht</option>
<option value="bef">Befriedigung</option>
</select> Warum kaufen Sie?<br /><br />
<input type="text" name="PLZ" size="15" maxlength="20"> Geben Sie Ihre
Postleitzahl ein.<br /><br />
<input type="reset" name="Reset"
value="Rücksetzen" />
<input type="submit" name="Senden"
value="Abschicken" />
</form>
</body>
</html>
Beim Senden dieses Formulars soll nun in der JavaScript-Funktion vollst() überprüft werden, ob alle Formularelemente ausgefüllt wurden. Dies erfolgt über mehrere Fallunterscheidungen. Für jedes Formularelement muss eine eigene Fallunterscheidung eingeführt werden. Ist die Bedingung nicht erfüllt, wird von dem Formular der Wahrheitswert false zurückgeliefert. Dies führt dazu, dass das Formular nicht abgeschickt wird. Im Folgenden sehen Sie einen Ausschnitt aus dem Quellcode mit dem Aufruf der JavaScript-Funktion. Im nächsten Schritt müssen die Fallunterscheidungen für die einzelnen Formularelemente vorgenommen werden.
Formularelemente
JavaScript
Zugriff auf Formularelemente
Zuerst müssen Sie checken, ob einer der Radiobuttons ausgewählt wurde. Der Zugriff auf die Formularelemente erfolgt über das document-Objekt. In der Punktnotation müs
Statt des Namens des Formulars können Sie dieses auch mit dem Array forms und dem zugehörigen Index in eckigen Klammern angeben. Das erste Formular einer Seite hat den Index 0, das zweite 1 etc. Die Formularelemente können statt ihres Namens mit dem Array elements und ihrem Index angesprochen werden.
In unserem Beispiel wird die Gruppe von Radiobuttons mit document.umfrage. Zufriedenheit angesprochen. Da Radiobuttons immer eine Gruppe bilden, wird aus Zufriedenheit ein Array. Einzelne Radiobuttons werden mit den Indizes angesprochen.
Mit dem Befehl checked testen Sie, ob ein Radiobutton angeklickt ist. Die Checks für die drei Radiobuttons werden mit einem logischen ODER verknüpft. Sobald einer der Radiobuttons angeklickt ist, ergibt die Verknüpfung mit ODER den Wert true. Wenn das nicht der Fall ist, wird false zurückgegeben.
Listing 5.36: Einen Radiobutton prüfen
if (!(document.umfrage.Zufriedenheit[0].checked || document.umfrage.Zufriedenheit[1].checked || document.umfrage.Zufriedenheit[2].checked)) {
return false;
}
Info ........
Da Checkboxen voneinander unabhängig sind, ist es nicht sinnvoll, zu prüfen, ob sie angekreuzt sind oder nicht, denn das sind ja die zwei Optionen für den Nutzer. Wollen Sie prüfen, ob aus einer Gruppe von Checkboxen mindestens eine angekreuzt ist, können Sie das allerdings auf dieselbe Weise wie bei den Radiobuttons erledigen. Statt des Arrays mit Index müssen Sie nur die Namen der Checkboxen einfügen.
Das Textfeld Beschreibung soll daraufhin untersucht werden, ob es einen Inhalt hat, also keinen leeren String enthält. Da die Daten des Textfelds im value-Attribut mitgeliefert werden, muss dieses in der if-Anweisung geprüft werden. Ist es leer, so ist die Bedingung erfüllt und es wird false zurückgeliefert. Das Formular wird also nicht verschickt.
Listing 5.37: Ein Textfeld prüfen
if (document.umfrage.Beschreibung.value=="") {
return false;
}
Bei der Auswahlliste kauf ist die Überprüfung ebenfalls recht einfach. Wenn keines der Elemente ausgewählt wurde, hat das Array selectedIndex den Wert –1. selectedIndexenthält den oder die Indexnummern der gewählten Optionen.
Listing 5.38: Eine Auswahlliste prüfen
if (document.umfrage.kauf.selectedIndex==-1) {
return false;
}
Als Letztes wollen wir in unserem Beispiel überprüfen, ob das Textfeld für die Postleitzahl richtig ausgefüllt wurde. Dazu reicht es nicht, zu prüfen, ob das Feld überhaupt ausgefüllt wurde. Stattdessen wollen wir wissen, ob es die vorgeschriebenen fünf Stellen enthält. Dazu müssen wir die Zahl der Stellen zählen. Dies erledigt der Befehl length.
if ((document.umfrage.PLZ.value.length!=5)) {
return false;
}
Tipp .......
Sie haben am letzten Beispiel gesehen, dass man Angaben recht detailliert überprüfen kann. Allerdings werden Plausibilitätstests von Nutzerangaben schnell sehr komplex, auch wenn Sie beispielsweise reguläre Ausdrücke einsetzen. Und Sie können sicher sein, dass findige »Trickser« immer noch Wege entdecken werden, völligen Nonsens in Ihre Formulare zu schreiben – »blabla«, »xy« und »Donald Duck« sind immer möglich. Finden Sie also immer den richtigen Grad zwischen Aufwand und Nutzen. Aus unserer Erfahrung erscheint es beispielsweise sinnvoll, zu prüfen, wie lang eine Postleitzahl ist, da es sich hier auch oft um unabsichtliche Fehlerangaben handeln kann. Dagegen ist es sinnlos, Sonderzeichen in Namen herausfiltern zu wollen. Gibt ein Nutzer Sonderzeichen in ein solches Feld ein, so wird er das Formular sicher nie richtig ausfüllen.
Komplette Vollständigkeitsüberprüfung
In diesem Abschnitt fügen wir die einzelnen Elemente unseres Beispiels zusammen und zeigen Ihnen das Formular als Ganzes. Nach den if-Anweisungen fügen wir noch eine else-Anweisung ein. Wenn keine der if-Anweisungen zutrifft, das Formular also vollständig ist, wird mit der else-Anweisung true zurückgegeben. Dies ist nicht unbedingt notwendig, aber sauberer.
Listing 5.39: Vollständigkeitsüberprüfung für ein Formular (formular_vollst.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Formular</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript"><!--
function vollst() {
if (!(document.umfrage.Zufriedenheit[0].checked || document.umfrage.Zufriedenheit[1].checked || document.umfrage.Zufriedenheit[2].checked)) {
return false;
}
if (document.umfrage.Beschreibung.value=="") {
return false;
}
if (document.umfrage.kauf.selectedIndex==-1) {
return false;
}
JavaScript
296
Um dieses Problem zu lösen, sammeln wir die Angaben der unvollständig ausgefüllten Felder in einer Zeichenketten-Variablen. Am Schluss prüfen wir, ob die String-Variable überhaupt Zeichen enthält. Wenn nicht, so ist auch kein Fehler aufgetreten. Ansonsten werden die fehlerhaften Felder mit alert() ausgegeben.
Listing 5.40: Vollständigkeitsüberprüfung mit Fehlermeldung (formular_meld.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Formular</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript"><!--
function vollst() {
var fehler = "";
if (!(document.umfrage.Zufriedenheit[0].checked || document.umfrage.Zufriedenheit[1].checked || document.umfrage.Zufriedenheit[2].checked)) {
fehler += "Zufriedenheit\n";
}
if (document.umfrage.Beschreibung.value=='') {
fehler += "Beschreibung\n ";
}
if (document.umfrage.kauf.selectedIndex==-1) {
fehler += "Kaufmotivation\n";
}
if (document.umfrage.PLZ.value.length!=5) {
fehler += "Postleitzahl";
}
if (fehler=='') {
return true;
}
else {
alert('Folgende Felder wurden nicht vollständig ausgefüllt:\n'+fehler);
return false;
}
}
//--></script>
</head>
<body>
<form action="mailto:
[email protected]" method="post"
enctype="text/plain" onsubmit="return vollst()"
name="umfrage">
<p>Wie zufrieden sind Sie mit dem Service?</p>
<input type="radio" name="Zufriedenheit"
value="nicht" /> nicht
<input type="radio" name="Zufriedenheit"
value="relativ" /> relativ
<input type="radio" name="Zufriedenheit"
value="sehr" /> sehr zufrieden<br /><br />
<textarea name="Beschreibung" rows="10" cols="40"
wrap="virtual"></textarea><br /><br />
<select name="kauf" size="2">
<option value="gel">Geltungsbedürfnis
</option>
<option value="kau">Kaufsucht</option>
<option value="bef">Befriedigung</option>
</select> Warum kaufen Sie?<br /><br />
<input type="text" name="PLZ" size="15" maxlength="20"> Geben Sie Ihre
Postleitzahl ein.<br /><br />
<input type="reset" name="Reset"
value="Rücksetzen" />
<input type="submit" name="Senden"
value="Abschicken" />
</form>
</body>
</html>
Bei der Vollständigkeitsüberprüfung sind selbstverständlich noch viele Varianten denkbar: Geben Sie doch beispielsweise die Fehlermeldungen direkt neben den leeren Feldern aus. Dazu benötigen Sie nur einen leeren <div>-Container und den DHTML-Zugriff (siehe Abschnitt 5.12.1). Sie können die Vollständigkeitsüberprüfung für jedes Feld auch schon beim Verlassen des Felds durchführen lassen (siehe nächster Abschnitt zu den Ereignissen für Formularelemente)
