Formularüberprüfung im Blog Teil I

Wie kann ich Formulareingaben einfach überprüfen?

Oftmals gibt man auch im Blog ein Formular aus. Der Kunde soll es ausfüllen und absenden. Nun gibt es Vögel, die sich einen Spaß daraus machen, diese Formulare nicht auszufüllen und einfach leer oder unrichtig ausgefüllt los zu senden.

Mit ein wenig Javascript, kann man dem einen Riegel vorschieben. Man prüft das Formular mit Javascript und nur eine richtige Eingabe lässt das Formular an den Empfänger durch, ansonsten wird nur eine Fehlermeldung ausgegeben und das Formular wieder auf Eingabebereitschaft gestellt.

All dies lässt sich schon im HTML beim Formularaufbau anfordern. OK! Javascript ist eine andere Programmiersprache, die nur auf dem Rechner des Klienten läuft – also für den Internetbenutzer sichtbar ist! Aber wenn man nicht gerade geheime Dinge abfrägt, kann man Javascript sicher anwenden.

Formularabfrage im Kontaktformular

Nehmen wir als Beispiel das Kontaktformular im Impressum! Hier soll der Kunde eine Nachricht abgeben und diese soll als E-Mail aus dem Blog versendet werden. (vgl. Artikel Kontaktformular für das Impressum)

Um das Formular zu prüfen, muss man dies im <form-Tag als Anweisung angeben. Dies geschieht mit der Anweisung

onsubmit=“return checkmail()“

Nun wird die Javascript-Routine checkmail() aufgerufen und zwar genau dann, wenn der Kunde auf den Übertragungsbutton klickt.
Innerhalb der Javascript-Routine wird nun geprüft, ob alle notwendigen Felder des Formulars ausgefüllt sind und ggf. eine Fehlermeldung ausgegeben.

Die Meldung sieht dann beim Absenden eines leeren Formulars in etwas so aus:

 

 

Man ist nun gezwungen auf OK zu klicken und kann seine Eingabe wiederholen.

Wie das geht, kann ich leider nur schildern, wenn ich wenigstens eine kleine Einführung in Javascript darstelle.

Kleine Einführung in Javascript

Javascript ist eine Programmiersprache mit einer ähnlichen Syntax wie PHP oder C! Sie ist stark auf sog. Objekte bezogen und wird auf einer HTML-Seite am Besten in den <header … </header-Tag eingebaut.

Der Javascriptcode wird vom Browser interpretiert und ausgeführt. Ist also nicht zu verwechseln mit einem PHP-Coding, das bereits auf dem Server ausgeführt wird. Das Javascriptcoding liegt offen auf der HTML-Seite und kann im Quellcode der Seite angesehen werden.

Als erstes muss ein derartiges Check-Coding nun Verbindung mit der Seite aufnehmen. Alle im HTML-Formular angegebenen name-Attribute sind gleichlautend auch Elemente es Javascript-Objektes document. Man kann für Javascript dann leicht eine Variable mit

var email = document.kontakt.email.value;

definieren, die man dann weiter benutzen kann. Dabei ist dann document ein Objekt und kontakt der Name des Formulars!
Dieser Name muss aber im <form-Tag mit name=“kontakt“ angegeben sein. Das Formularfeld email ist im Formular ebenfalls mit name=“email“ definiert und die Variable email erhält nun über value den Eingabewert des ausgefüllten Formulars nach dem Absenden.

Um aus Javascript eine Ausgabe machen zu können gibt es unter anderem den Befehl alert(variable)! Hier wird automatisch der Inhalt des Parameters variable im Browser gezeigt und mit einem ok-Button versehen.

Nun braucht man nur noch ein wenig Logik ins Programm zu schreiben und schon ist die Formularprüfung fertig.
Wie dies funktioniert und an Hand eines Kontaktformulars geschrieben werden kann, wird im nächsten Teil des Artikels gezeigt.

Bis dahin, Gruß
Bernd

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar