SELFHTML/Quickbar  JavaScript  Anwendungsbeispiele

Formulareingaben überprüfen
Diese Seite ist ein Dokument mit Informationstext

 Formulareingaben überprüfen - das Beispiel

 

Netscape3.0MS IE 4.0 Formulareingaben überprüfen - das Beispiel

Beispiel Anzeigebeispiel: So sieht's aus

Wenn Sie HTML-basierte  Formulare im WWW anbieten, kann jeder Anwender irgendeinen Unsinn in das Formular schreiben und es dann abschicken. Betroffen davon sind vor allem einzeilige und mehrzeilige Eingabefelder. Dadurch erhalten Sie überflüssige E-Mails, oder ein  CGI-Script, das die Formulareingaben verarbeitet, speichert leere oder nutzlose Daten ab. Mit Hilfe von JavaScript können Sie Formulareingaben überprüfen, bevor das Formular abgeschickt wird. Bei fehlenden oder offensichtlich fehlerhaften Eingaben können Sie das Absenden des Formulars verhindern.

Das Beispiel auf dieser Seite zeigt, wie eine solche Überprüfung im Prinzip funktioniert. Je nachdem, was Ihr Formular enthält, müssen Sie das Beispiel natürlich erweitern.

Hinweis: Zur besseren Orientierung enthält das Beispiel Verweise zu den entsprechenden Erläuterungen, z.B. 1*. Diese Verweise gehören nicht zum Quellcode. Falls Sie das Beispiel in einen Editor kopieren, müssen Sie diese Verweise löschen. Andernfalls erhalten Sie JavaScript-Fehlermeldungen.

Beispiel:

 <html>
 <head>
 <title>Seitentitel</title>
 <script language="JavaScript">
  <!--
  2* function chkFormular()
  {
   if(document.Formular.User.value == "")
    {
     alert("Bitte Ihren Namen eingeben!");
     document.Formular.User.focus();
     return false;
    }
   if(document.Formular.Ort.value == "")
    {
     alert("Bitte Ihren Wohnort eingeben!");
     document.Formular.Ort.focus();
     return false;
    }
   if(document.Formular.Mail.value == "")
    {
     alert("Bitte Ihre E-Mail-Adresse eingeben!");
     document.Formular.Mail.focus();
     return false;
    }
   if(document.Formular.Alter.value == "")
    {
     alert("Bitte Ihr Alter eingeben!");
     document.Formular.Alter.focus();
     return false;
    }
   if(document.Formular.Mail.value.indexOf('@') == -1)
    {
     alert("Keine E-Mail-Adresse!");
     document.Formular.Mail.focus();
     return false;
    }
   var chkZ = 1;
   for(i=0;i<document.Formular.Alter.value.length;++i)
     if(document.Formular.Alter.value.charAt(i) < "0"
     || document.Formular.Alter.value.charAt(i) > "9")
       chkZ = -1;
   if(chkZ == -1)
   {
     alert("Altersangabe keine Zahl!");
     document.Formular.Alter.focus();
     return false;
    }
  }
  //-->
 </script>
 </head>
 <body>
 1* <form name="Formular" action="mailto:du@duda.de"
method=post onSubmit="return chkFormular()">
 <pre>
 Name:     <input type=text size=40 name="User">
 Wohnort:  <input type=text size=40 name="Ort">
 E-Mail:   <input type=text size=40 name="Mail">
 Alter:    <input type=text size=40 name="Alter">
 Formular: <input type=submit value="Absenden"><input type=reset value="Loeschen">
 </pre>
 </form>
 </body>
 </html>

Erläuterung:

 Formular definieren
Im Beispiel wird ein gewöhnliches  HTML-Formular mit einigen Eingabefeldern, einem Rest-Button zum Zurücksetzen des Formulars und einem Submit-Button zum Absenden des Formulars definiert. Die einzige Besonderheit ist die Anweisung onSubmit="return chkFormular()" im einleitenden <form>-Tag. Der  Event-Handler onSubmit= wird aktiv, wenn der Anwender auf den Submit-Button klickt, um das Formular abzusenden. Dann wird die JavaScript-Funktion chkFormular() aufgerufen, die im Dateikopf notiert ist. Wenn die Funktion Fehler bei den Eingaben findet, gibt sie den Wert false (falsch) zurück, ansonsten den voreingestellten Wert true (wahr). Mit return wird dieser Wert im einleitenden <form>-Tag an den Browser weitergegeben. Der Browser kennt die beiden Werte true und false. Im Zusammenhang mit onSubmit= reagiert er so, daß er das Formular nur dann abschickt, wenn der Wert true ist. Ist der Wert false, wird das Absenden der Formulardaten verhindert.

 Formular überprüfen
Die eigentliche Formularüberprüfung findet im Beispiel in der Funktion chkFormular() statt, die in dem Scriptbereich im Dateikopf notiert ist. Im Beispiel soll jedes Eingabefeld daraufhin überprüft werden, ob es einen Inhalt hat, d.h. ob der Anwender es ausgefüllt hat. Bei der Angabe zur E-Mail-Adresse soll zusätzlich überprüft werden, ob in der Eingabe das Zeichen @ vorkommt. Ist das nicht der Fall, kann man davon ausgehen, daß der Anwender Unsinn eingegeben hat in dem entsprechenden Feld. Bei der Altersangabe schließlich soll zusätzlich überprüft werden, ob die Eingabe eine positive ganze Zahl ist. Andernfalls muß man auch hierbei eine unsinnige Angabe vermuten.

Mit einer Abfrage wie if(document.Formular.User.value == "") wird ermittelt, ob das entsprechende Formularfeld (im Beispiel also das Feld mit dem Namen User im Formular mit dem Namen Formular) überhaupt einen Inhalt hat. Es wird also auf die leere Zeichenkette "" hin geprüft.

Mit einer Abfrage wie if(document.Formular.Mail.value.indexOf('@') == -1) wird ermittelt, ob in der Eingabe ein bestimmtes Zeichen fehlt (hier das @-Zeichen, das für E-Mail-Adressen charakteristisch ist).

Mit einem Ausdruck wie:
for(i=0;i<document.Formular.Alter.value.length;++i)
if(document.Formular.Alter.value.charAt(i) < "0"
|| document.Formular.Alter.value.charAt(i) > "9")
ermitteln Sie Zeichen für Zeichen, ob ein eingegebener Wert etwas anderes als Ziffern enthält. Wenn ja, wird im Beispiel eine Merkvariable namens chkZ auf den Wert -1 gesetzt.

Bei allen Abfragen dieser Art werden jeweils drei Anweisungen ausgeführt, wenn die Anwendereingaben der Prüfung nicht standhalten. Zuerst wird mit alert() jeweils in einem Meldungsfenster ausgegeben, was der Anwender falsch gemacht hat. In der zweiten Anweisung wird mit der focus()-Methode auf das Formularelement positioniert, auf das sich der Fehler bezieht. Der Anwender kann seine Feldeingabe also gleich korrigieren. Die dritte Anweisung schließlich gibt false zurück. Dadurch wird das Absenden des Formulars verhindert.

weiter: Dynamische grafische Buttons
zurück: Persönliche Seitenbesuche zählen mit Cookies
 

SELFHTML/Quickbar  JavaScript  Anwendungsbeispiele

© 1998  Stefan Münz, muenz@csi.com