Mit Javascript Formulare überprüfen

Formulare sind nur dann gut, wenn Sie richtig ausgefüllt werden. Um Fehler zu vermeiden, müssen Sie die Formulare prüfen, bevor Daten gespeichert werden. Diese Prüfung erfolgt entweder auf dem Server oder – ressourcenschonend – schon beim Client. Dazu brauchen Sie nur ein paar Zeilen Javascript.

Ein simpler Test

Um das Ineinandergreifen von Javascript, HTML und einem Formular zu veranschaulichen, betrachten Sie den einfachsten Fall einer Client-seitigen Prüfung. Soll sichergestellt werden, dass ein bestimmtes Pflichtfeld ausgefüllt ist, erweitern Sie das <form>-Tag um das Attribut 

onsubmit='return checkForm();'

onsubmit bedeutet: Drückt der Anwender den Button Abschicken, wird der definierte Javascript-Code in checkForm() ausgeführt, bevor der Versand der Formularwerte erfolgt. Liefert der Code dann den Wert true zurück, ist dies ein Signal, dass der Versand erfolgen darf. Bei false dagegen, wird der Versand gestoppt.

Um von der Funktion checkForm() den Wert zurückzutransportieren, ist die etwas merkwürdig anmutende Konstruktion mit dem return notwendig. Würde man darauf verzichten, würde zwar die Funktion aufgerufen, aber ihr Rückgabewert nicht beachtet und in jedem Fall das Formular abgeschickt.

Die im notwendigen <script>-Block vorhandene Javascript-Funktion prüft zunächst, ob der Wert des Feldes „Name“ leer ist. Dazu wird das Feld angesprochen und sein Wert mit einem Leerstring verglichen:

if (document.forms[0].name.value=="")

Die mit Punkten getrennte Bezeichnung entspricht dabei dem Document Object Model, also dem Standard, wie die Elemente einer HTML-Seite hierarchisch gegliedert werden. Dabei steht document für das aktuelle Dokument selbst und forms[0] für das erste Formular darin.

Mindestlänge testen

Der erste Vergleich würde allerdings schon eine Eingabe akzeptieren, die aus einem einzigen Zeichen besteht. Um dagegen gegen eine Mindestlänge zu prüfen, würden Sie ein Konstrukt wie das folgende einsetzen, das zum Beispiel ein PLZ-Feld prüft.

if (document.forms[0].plz.value.length<5)

Die Eigenschaft length hat in Javascript jede Zeichenkette, weshalb man dieses Keyword einfach an den value des PLZ-Feldes anhängen kann.

Der Block aus Anweisungen, der ausgeführt wird, falls die Zuweisung zutrifft und damit eine Fehleingabe vorliegt, besteht aus der Meldung, dass das Feld nicht ausgefüllt ist. Dazu gibt das Skript den Wert false zurück, der den Formularversand abbricht. Für den Fall, dass alles in Ordnung ist, könnte man noch einen else-Zweig fer Bedingung einfügen, der ein true zurückliefert. Das ist aber gar nicht nötig, da Javascript ohne ein explizites false den Versand einfach ausführt. 

if (document.forms[0].plz.value.length<5) {

  alert('Feld PLZ ist nicht korrekt ausgefüllt');

  return(false);

}

Bei Eingabmasken mit vielen Feldern könnten Sie vor das return noch einen Befehl einbauen, der den Eingabecursor gleich auf das Feld setzt, das den Fehler erhält. So spart sich der Benutzer die Navigation dorthin. Dies geschieht mit der Methode focus(), die auf das betreffende Eingabefeld angewendet wird

document.forms[0].plz.focus();

Gibt es in einem Webformular Tests für mehrere Felder durchzuführen, können Sie zwei Strategien verfolgen. Die eine wäre es, beim ersten festgestellten Problem eine entsprechende Warnung ausgeben zu lassen und zurück zum Formular zu springen. Oder Sie prüfen alle Felder nacheinander durch, sammeln dabei eventuelle Meldungen ein und geben die dann zusammen am Schluss aus. Das sieht dann so aus: 

var strFehler='';

if (document.forms[0].name.value=="")

  strFehler += "Feld Name ist leern";

if (document.forms[0].plz.value.length<5)

  strFehler += "Feld PLZ ist nicht korrekt ausgefülltn";

if (strFehler.length>0) {

  alert("Festgestellte Probleme: nn"+strFehler);

  return(false);

}

Das n ist in Javascript-Strings der Code für eine Zeilenschaltung, damit die Ausgabe ein bisschen ansprechender formatiert wird. Bei den einzelnen if-Konstrukten haben Sie vielleicht das Fehlen der geschweiften Klammer für den Codeblock bemerkt. Wenn der, wie in diesem Fall, nur aus einer einzigen Zeile besteht, kann man sie weglassen. Das macht den Code kürzer und besser lesbar.

Formularprüfung mit Javascript: Fehlermeldungen




E-Mail-Adresse prüfen

Um E-Mail-Adressen zumindest auf syntaktische Korrektheit zu prüfen, brauchen Sie eine Mustererkennung. Die prüft unter anderem, ob ein @-Zeichen in der Adresse steht und ob die Domain-Adresse syntaktisch richtig ist. Um zu testen, ob eine Adresse auch wirklich existiert, müsste man den für sie zuständigen Mailserver kontaktieren und das Postfach überprüfen lassen. Das führt hier ein wenig zu weit.

Möglich macht die Prüfung der Adress-Syntax die Integration der so genannten „regulären Ausdrucke“ in Javascript. Diese Textmuster bestehen aus Kombinationen von Buchstaben, Zahlen und einigen Sonderzeichen.

Zum Test schaffen wir eine neue Funktion checkEmail(), die als Parameter eine Adresse erwartet und je nach Ergebnis wahr oder falsch zurückliefert. 

function validEmail(email) {

  var strReg = "^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$";

  var regex = new RegExp(strReg);

  return(regex.test(email));

}

Vereinfacht gesagt, prüft der Ausdruck zunächst, ob vor dem @-Zeichen nur Buchstaben, Ziffern sowie die Zeichen „_“, „-“ und „.“ stehen. Dann muss das @-Zeichen folgen. Wiederum danach muss mindestens eine Zeichenkette folgen, die nur aus Buchstaben und Ziffern besteht und die mit einem Punkt endet. „Mindestens“, weil es auch Adressen wie xy@das.ist.mein.server.xy gibt. Den Abschluss bildet eine Zeichenkette, wiederum aus Buchstaben und Ziffern, die mindestens zwei, maximal vier Zeichen lang ist. Dieser Ausdruck steht für die Domain-Endung, also „de“ oder „info“.

Nun können Sie den Aufruf von validEmail() noch an die bestehende Abfolge der if-Bedingungen hängen und haben einen kompletten Satz von Validitäts-Checkern für Ihre Formulare. 

Listing 

<html>

<head><title>Formulare mit Javascript</title>

<script type="text/javascript">

function checkForm() {

  var strFehler='';

  if (document.forms[0].name.value=="")

    strFehler += "Feld Name ist leern";

  if (document.forms[0].plz.value.length<5)

    strFehler += "Feld PLZ ist nicht korrekt ausgef¸lltn";

  if (!validEmail(document.forms[0].email.value)) {

    strFehler += "In der E-Mail-Adresse steckt der Wurm drin!n";

  }

 

  if (strFehler.length>0) {

    alert("Festgestellte Probleme: nn"+strFehler);

    return(false);

  }

}

function validEmail(email) {

  var strReg = "^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$";

  var regex = new RegExp(strReg);

  return(regex.test(email));

}

</script>

</head>

<body>

<form action='anmelden.php' onsubmit='return checkForm()'>

<h1>Newsletter-Anmeldung</h1>

<p>Name <input name='name'/></p>

<p>PLZ <input name='plz'/></p>

<p>Email-Adresse <input name='email'/></p>

<p><input type='submit' value='Absenden'/></p>

</form>

</body>

</html>

Ähnliche Beiträge

4 Gedanken zu „Mit Javascript Formulare überprüfen“

  1. Gott, danke für diese Seite…habe Stunden nach einer Lösung für einen Check der Mindestlänge gesucht! Hat reibungslos geklappt! Herzlichen Dank!

    Gruß SB

  2. erstmal danke für diese ausführliche anleitung! sehr gute arbeit! hat mir sehr geholfen.

    allerdings wird bei deiner version eine email-adresse wie „asdf@asdf“ zugelassen. ein punkt nach dem @ sollte aber in jedem fall vorhanden sein, daher hab ich das bei mir mal wie folgt erweitert:

    var strReg = „^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+.+([a-zA-Z0-9]{2,4})+$“;

  3. Die Abfrage nach dem Punkt hab ich bei mir so hier gelöst:
    In die Funktion checkForm()

    if (document.forms[0].email.value.indexOf(„.“) == -1){strFehler += „Keine gültige E-Mail-Adresse! nnn Bitte geben Sie eine E-Mail nach dem Schema: nn abc-._xyz@abc.-xyz.info nn ein.“);}

    eingefügt… Bei allen von mir getesteten Fällen hats somit einwandfrei geklappt.

  4. Bin super zufrieden damit, dennoch hab ich ein Problem. Ohne JS wurde beim absenden des Formulares, das Eingabefeld geleert/gesendet (php zum senden noch nicht konfiguriert) seit ich JS verwende funktioniert die Fehlermeldung wie sie sollte, aber beim „senden“ (wenn auch ohne action) passiert NICHTS, das feld behält den Wert und beim Senden Button geschieht nichts 🙁

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *