Formularüberprüfung im Blog Teil II

Willkommen zum 2. Teil des Artikels über Forumularüberprüfung (den ersten Teil finden Sie hier.

Weiter mit Javascript

Wir hatten ja schon erwähnt, dass es bei Javascript um die Objekte der angezeigten Seite geht. All diese Objekte lassen sich mit Variablen ansprechen, wobei man immer auf die Namen der Objekte aufpassen muss.

Die Objekte einer Seite lassen sich hierarchisch ordnen. Ausgangspunkt ist das Objekt document. Anschließend kommen entweder die strukturierten Anweisungen wie z.B. <form, die einen Namen haben sollten.

Durch <form name=“kontakt“…. > wird dem Objekt Formular ein Name gegeben. Diesen kann man ansprechen über document.kontakt, was man in Javascript schon einer Variablen zuweisen könnte, diese Variable hätte dann automatisch den Typ object. Wir wollen hier aber auf die Felder des Formulars zugreifen, deshalb müssen wir auch alle Felder des Formulars benennen. Somit haben wir Eingabefelder <input… > , wir haben Auswahlfelder und Buttons etc. Diese stellen jeweils die nächste Hierarchiestufe in den Javascript-Objekten dar. Somit können wir mit

var email = document.kontakt.email;

das Eingabefeld email adressieren.

Nun haben diese Objekte in Javascript sogenannte Eigenschaften und Methoden (fast wie bei richtigen objektorientierten Programmiersprachen)! Eine Eigenschaft ist z.B. value, mit dem man den Wert des Feldes erhält, wie es der Benutzer eingegeben hat. Wenn wir also – wie in Teil 1 – unsere Variable email definieren:

var email = document.kontakt.email.value;

wird in der Variablen email nun der Wert des Formularfeldes email nach der Eingabe stehen.

Wie Sie sehen, sind diese Objektangaben etwas lang, deshalb definiert man sich am Anfang des Scripts kürzere Variablen, um sich Schreibarbeit zu ersparen. Der Rest ist dann Logik.

Beispielscript

Hier nun unsere Prüfroutine checkmail():

<script language=“JavaScript“ type=“text/JavaScript“>
function checkmail() {
 var errors=“;
 var name = document.kontakt.name.value;
 var mess = document.kontakt.message.value;
 var email = document.kontakt.email.value;
 var telefon = document.kontakt.telefon.value;
 if (name== “) errors+=’Benötigt Name\n‘;
 if (mess== “) errors+=’Bitte keine leere Nachricht\n‘;
 if ((telefon== “) && (email == “)) errors+=’Benötigt Telefon oder Email\n‘;
 if (email!= “) {
   if (email.indexOf(„@“) <= 1 || email.indexOf(„@“) >= (email.length – 3)
    || email.indexOf(„@.“) >= 0 ) errors+=’Falsches Email-Format\n‘;
 }
 if (errors != „“) {
   alert(‚Fehler in Formularangabenn\n’+errors);
   return false;
 } else return true;
}
</script>

Hierzu einige Bemerkungen

  1. if(name == “): Wird abgefragt, ob die Variable leer ist, also nix in das Formular eingegeben wurde. Wenn dies der Fall sein sollte, dann wird die Variable errors mit einem Text gefüllt.
  2. +=: Zu beachten ist, wenn errors am Anfang des Programms mit error=“ als leer definiert wurde, dann wird mit += hier nun der Wert „Benötigt Name\n“ an den Wert der Variablen gehängt. Man nennt das auch Konkatinieren. Das Ende vom Lied ist dass in errors alle Texte so gesammelt werden.
  3. \n: Mit diesem Sonderzeichen wird auf der Ausgabe später ein Zeilenvorschub erzeugt!
  4. email.indexOf(„@“): Hier wird die Position des Zeichens @ in der Variablen email bestimmt. Wenn diese <= 1 ist, dann ist kein Zeichen vorhanden und somit unsere Fehlermeldung abgefragt.
  5. ||: Mit diesen Zeichen werden 2 oder mehrere Abfragen mit logischem Oder verknüpft
  6. email.length: Hier wird auf eine weitere Eigenschaft eines Objektes Zugriff genommen mit email.length wird eingegebene Länge des Variablenwertes abgefragt.
  7. alert: Mit der Funktion alert(„text“) wird nun auf dem Bildschirm eine einfaches Window ausgegeben, das den Text und einen Ok-Button enthält.
  8. return true oder return false: Hier erfolgt nun der Rücksprung aus der Javascript-Routine. Ist ein Fehler aufgetreten, dann melden wir false, ansonsten true

Wirkung

Wenn wir nun dieses Script in unsere HTML-Seite aufnehmen, dann kommt es darauf an es mit dem richtigen Befehl zu aktivieren:
Dies müssen Sie im <form-Statement durchführen: Das Formstatement lautet nun:

<form action=“php-programm“ method=“post“ name=“kontakt“ onsubmit=“return checkmail()“>

Mit method=“post“ wird bestimmt, dass die Parameter des Formulars nicht über die URL weitergegeben werden – das könnte man benutzen, um Unsinn in der URL zu tun.
Hier wird ein sogenannter POST-Bereich benutzt um die ausgefüllten Felder an das im Hintergrund stehende Programm weiter zu geben.
Durch action=“php-programm“ wird hier eine Routine mit dem Namen php-programm gerufen, das aber erst nach dem Ausführen des Javascripts checkmail() zum tragen kommt.
Wie man ein derartiges Programm schreibt, wird demnächst dargestellt.

Wichtig ist – und das will ich nochmals herausstellen – dass die Abfolge für den Kunden nun so aussieht:

  1. Das Formular wird leer ausgegeben.
  2. Der Benutzer füllt das Formular aus und schickt es mit dem Eingabebutton ab
  3. Die Eingabe wird nun durch onsubmit=“return checkmail()“ an das Javascript geleitet, das die Prüfung übernimmt
  4. Falls checkmail einen Fehler findet, erscheint das Fehlerbild mit den Fehlermeilungen und dem ok-Button
  5. Drückt der Benutzer nun den ok-Button, dann wird das ursprüngliche Formular wieder gezeigt
  6. Erst wenn die Eingabe richtig ist, erfolgt wegen action=“php-programm“ method=“post“ die Verzweigung auf den Server und das gerufene Programm

Dies hat den Vorteil, dass nicht der Server im Hintergrund die Prüfung des Formulars übernimmt, sondern alles im Benutzer-Browser bleibt! Ansonsten würden jeweils Übertragungen auf den Server stattfinden, was die ganze Sache sehr langsam machen könnte!

Dies war der Teil II der Formularprüfung! Wer neugierig ist, der kann sich ja aus dem Artikel Kontaktformular für das Impressum das dort angebotene Programm herunterladen und sich die gesamte php-Routine anschauen.

Bis dahin
Bernd Klüppelberg

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar