JavaScript Form Beispiel 6: Form Field check

Bevor die durch einen Benutzer in einem Formular eingegebenen Daten an den Server geschickt werden, können die Daten auf Seite des Clients auf Gültigkeit geprüft werden. Eine derartige Vorgehensweise reduziert den anfallenden Traffic und entlastet den Webserver. Darüber hinaus wird der Benutzer umgehend auf Fehler bei der Eingabe von Daten hingewiesen. Dabei entfällt die Wartezeit auf die Antwort einer Prüfung von Seite des Webserver-Scripts – Daten an den Server senden, anschließende Prüfung der Eingabe und Senden der Rückmeldung durch den Server.

Wie die einzelnen Eingabefelder auf gültige Eingabewerte getestet werden ist Geschmackssache. Eingabeelemente können beispielsweise direkt nach Verlassen des Eingabeelements – unter Verwendung des Events onBlur, welches ausgelöst wird, wenn ein Element den Focus verliert – auf Gültigkeit der Eingabe getestet werden. Aber auch die Prüfung aller Eingabefelder eines Formulars in einem einzigen Schritt ist möglich. Hier kann sich der Webentwickler des onSubmit-Events bedienen, welches auftritt, wenn der Submit-Button eines Formulars aktiviert wurde. Ebenfalls denkbar ist es, einen speziellen Button anzubieten, der nach dessen Betätigung über das onClick-Event eine spezielle Prüffunktion startet.

Das folgende Beispiel demonstriert, wie Daten eines Formulars vor dem Abschicken an den Webserver geprüft werden können. Dazu wird zunächst ein HTML-Formular definiert, welches neben einem Submit-Button zwei Eingabefelder beinhaltet. Die beiden Textfelder sollen durch die im weiter unten stehene JavaScript Funktion auf eine gültige Eingabe geprüft werden. Gültig ist in diesem Beispiel die Eingabe nur dann, wenn im ersten Feld die Zeichenkette „F1” und in zweiten Textfeld das String „F2” eingegeben wurde.

In der onSubmit-Eigenschaft des Formulars wird mit der Funktion form_check() eine Event-Handler-Funktion angegeben, die vor dem Abschicken der im Formular eingegebenen Daten – nachdem der Benutzer auf den Submit-Button geklickt hat – aufgerufen wird. Diese Funktion liefert entweder den Wert TRUE oder den Wert FALSE zurück. In Abhängigkeit dieses Rückgabewertes werden die Daten an den Webserver verschickt (falls die Funktion TRUE liefert), oder eben nicht.

In der Funktion wird der Inhalt der Eingabefelder über je ein If-Statement auf die im jeweiligen Feld akzeptierte Eingabe getestet. Der Zugriff auf die Eingabeelemente des Formulars erfolgt mittels des JavaScript-Objekts Document. Davon ausgehend wird auf das Formular und dessen Elemente über deren Namen zugegriffen. Treffen beide per If-Abfragen geprüfte Bedingungen zu, so wird die Funktion mit Rückgabe von TRUE beendet.

Die Else-Bereiche der beiden Abfragen nutzen je eine Alert-Box, in der jeweils eine Meldung ausgegeben wird, die den Benutzer auf eine fehlerhafte Eingabe hinweisen sollen. Alert ist Teil der Schnittstelle des Objekts Window. Ist nur eine der Eingaben fehlerhaft, so wird – nachdem die entsprechenden Fehlermeldungen ausgegeben wurden – das Ende der Funktion erreicht, wo die Funktion mit dem Rückgabewert FALSE beendet wird.

<form name="formular" onsubmit="return form_check()">
  Feld 1 <input name="feld1" type="text" /><br>
  Feld 2 <input name="feld2" type="text" /><br>
  <input type="submit" value="Formulardaten nach erfolgreichem Eingabecheck abschicken" />
</form>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion prüft die durch den Benutzer in den Eingabefeldern getätigten Eingabedaten.
// Als Rückgabewert wird bei Auftreten eines Eingabefehlers FALSE geliefert. Dies führt
// dann zum Abbruch des Submit-Vorgangs. Liefert die Funktion den Wert TRUE, so wird der
// Submit-Vorgang durchgeführt.
function form_check () {
  // Erstes Eingabefeld auf korrekte Eingabe prüfen
  // Akzeptiert wird nur die Eingabe der Zeichenkette 'F1'
  if (document.formular.feld1.value == 'F1') {
    // Erstes Feld hat Prüfung bestanden!
    // Im Zweiten wird nun ausschliesslich 'F2' akzeptiert
    if (document.formular.feld2.value == 'F2')
      // Zweites Feld ist auch OK!
      // Jetzt können die im Formular eingegebenen
      // Daten an den Webserver verschickt werden.
      // Auch ein Aufruf der Form document.formular.submit ();
      // würde die Daten an den Webserver schicken.
      return true;
    else
      alert ('Das zweite Feld akzeptiert nur die Eingabe \'F2\'');
  }
  else
    alert ('Das erste Feld akzeptiert nur die Eingabe \'F1\'');
  // Wenn bei der Eingabe Fehler aufgetretenen sind, wird FALSE als
  // Rückgabewert geliefert.
  return false;
}
// -->
</script>

Bitte beachten Sie, dass eine Überprüfung von Benutzereingaben stets auch auf Seite des Webservers, der die Daten entgegen nimmt, erfolgen sollte. Zu empfehlen ist dies, da die Daten auch ungeprüft direkt per HTTP-Request – gleichermaßen per POST- wie GET-Request – an den Webserver übertragen werden können. Prüft das Script auf dem Server die Daten nicht, so stellt dies eine mögliche Schwachstelle dar, was den Server verwundbar gegen Angriffe macht.

« zurück zu Seite 1 2 3 4 5 weiter zu Seite 7 8 9 »