SELFHTML: JavaScript / Anwendungsbeispiele / Formulareingaben überprüfen
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Wie Sie mit Hilfe von JavaScript Eingaben in einem Formular überprüfen können, bevor das Formular abgesendet wird.
Keywords: SELFHTML, JavaScript, Formular, Eingabeprüfung, Formular-Check
Date: 2005-08-22T21:21:39+02:00

| # Formulareingaben überprüfen
| Hinweise zu diesem Beispiel Quelltext mit Erläuterungen Anzeigebeispiel: So sieht's aus

## Hinweise zu diesem Beispiel

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 Eingabefelder. Dadurch erhalten Sie überflüssige E-Mails, oder ein Perl-Script, das die Formulareingaben automatisch 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.

## Quelltext mit Erläuterungen

Das Beispiel zeigt die vollständige HTML-Datei mit dem Formular und dem JavaScript zum Überprüfen der Formulareingaben. Das Beispielformular ruft nach erfolgreichem Absenden ein CGI-Script auf dem Server von aktuell.de.selfhtml.org auf.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html>
    <head>
    <title>Formulareingaben &uuml;berpr&uuml;fen</title>
    <script type="text/javascript">
    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.Mail.value.indexOf("@") == -1) {
        alert("Keine E-Mail-Adresse!");
        document.Formular.Mail.focus();
        return false;
      }
      if (document.Formular.Alter.value == "") {
        alert("Bitte Ihr Alter eingeben!");
        document.Formular.Alter.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>

    <h1>Formular</h1>

    <form name="Formular" action="http://de.selfhtml.org/cgi-bin/formview.pl"
      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="Abbrechen">

    Zum Absenden muss eine Internet-Verbindung bestehen!
    </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 in einem JavaScript-Bereich 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, dass 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 Script-Bereich 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, dass 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 muss man auch hierbei eine unsinnigen 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.

| Dynamische grafische Buttons
| Persönliche Seitenbesuche zählen mit Cookies

© 2007 Impressum