Logo von www.onlex.de
Formular Workshop

Lerne das Erstellen von HTML-Formularen für deinen Onlex-Formmailer
Onlex auf Facebook verwenden Onlex auf Twitter verwenden

Formularüberprüfung
<script>

In der Vergangenheit erhielten wir viele Anfragen, wie man Pflichtfelder einfach deklarieren kann. Dies ist insbesondere wichtig, wenn man im Eifer des Gefechts das Formular absendet ohne eine eMail-Adresse hinterlassen zu haben. Sehr ärgerlich, wenn dadurch ein neuer Kontakt durch die Lappen geht.

Mit JavaScript ist es gar nicht mal so schwer eine einfache Formularüberprüfung zu erstellen.

Damit man schnell zu einem bestimmten Punkt gelangt - denn die Seite ist doch länger geworden, als gedacht - haben wir hier Link-Anker zu den einzelnen Abschnitten:

einfache Überprüfung mehrerer Eingabefelder

Hier ein Beispiel eines Formulars mit solch einer Funktion. Es müssen alle mit einem (*) gekennzeichneten Formularfelder ausgefüllt werden.

Dein Name:

Deine eMail-Adresse*:

Deine Nachricht*:

Passwort- / Spamschutz*:
Bitte gib trowssap ein


Quelltext-Auszug (head):

<script type="text/javascript">
<!--
function pruefen(){
var f = document.Kontakt;
var fehler = "";

if (f.eMail.value == ""){
fehler += "- deine eMail-Adresse\n";
}

if (f.Nachricht.value == ""){
fehler += "- deine Nachricht\n";
}

if (f.onlex_password.value == ""){
fehler += "- Anti-Spam-Kontrolle\n";
}

if (fehler != ""){
var fehlertext = "Die folgenden Felder wurden nicht vollständig ausgefüllt:\n\n";
fehlertext += fehler;
alert(fehlertext + "\nBitte füll die Informationen noch aus. Danke.");
return false;
}
return true;
}
//-->
</script>
Quelltext-Auszug (body) (vereinfachte Darstellung):

<form action="https://www.onlex.de/_formmailer.php4?username=formws" method="post" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8" name="Kontakt" onsubmit="return pruefen();">

Dein Name:<br>
<input type="text" name="eingabefeld" size="30"><br>

Deine eMail-Adresse*:<br>
<input type="text" name="eMail" size="30"><br>

Deine Nachricht*:<br>
<textarea name="Nachricht" cols="34" rows="5"></textarea>

Passwort- / Spamschutz*:<br>
Bitte gib <i>trowssap</i> ein<br>
<input type="password" name="onlex_password" size="30" maxlength="15"><br>

<input type="submit" name="Senden" value="Daten absenden">

</form>
Beachte bitte, dass bei einer Kopie des Quelltextes der Benutzername (hier rot und kursiv dargestellt) geändert werden muss.

Erläuterungen zum JavaScript Code:

Mit <script type="text/javascript"> wird der Bereich für JavaScript eingeleitet:
<script>, type = MIME-Typ.

Im Script wird jetzt die Funktion pruefen() gestartet. Es werden dann zwei Variablen kreiert:
var f = document.Kontakt; und var fehler = "";.
Damit spart man sich u.a. Schreibarbeit ;-)
document.Kontakt bezieht sich auf das aktuelle HTML Dokument und das HTML Element mit dem Wert im name Attribut Kontakt.

Nun kommt es zu der ersten Abfrage:

Quelltext-Auszug:

if (f.eMail.value == ""){
fehler += "- deine eMail-Adresse\n";
}
Kurz und knapp erklärt heisst es: Falls (if) der Wert des Bereiches "eMail" (f.eMail.value) leer (== "") ist, gib den Fehler "- deine eMail-Adresse" in einer Variablen (fehler +=) aus.

Nach dem Fehlertext steht \n. Dies ist ein Steuerzeichen bei Zeichenketten. Damit kann man in der Fehlerausgabe Ordnung schaffen, damit nicht alle Fehler direkt hintereinander geschrieben werden.

Die Abfrage vom obigen Beispiel kann man beliebig für alle anderen Eingabefelder und Eingabebereiche kopieren und in das Script einfügen. Wichtig ist, dass der jeweilige Formularname (name="") korrekt eingetragen wird, sonst funktioniert es nicht. Möchte das JavaScript ein Feld abfragen, was nicht im Formular existiert, so funktioniert die Abfrage ebenfalls nicht!

Erläuterungen zum HTML Code:

Im Event-Handler "onsubmit" wurde der Code return pruefen(); eingefügt. Also die Funktion, was beim Absenden (onsubmit) passieren soll.


^ zum Seitenanfang ^


Überprüfung einer eMail-Adresse

Insbesondere bei der eMail-Adresse möchte man hin und wieder überprüfen, ob es wirklich eine eMail-Adresse ist. Über Sinn und Unsinn kann man sich darüber streiten, denn man kann nicht überprüfen, ob es sich wirklich um eine gültige (d.h. aktive / registrierte) eMail-Adresse handelt.

Quelltext-Auszug:

if (f.eMail.value.indexOf("@") == -1){
fehler += "- korrekte eMail-Adresse\n";
}
Mit dem String indexOf("@") wird überprüft, ob ein Zeichen in einer Zeichenkette vorkommt. In diesem Fall wird nach dem "@" gesucht. Bleibt die Suche erfolglos, so wird dann -1 ausgegeben. Ist also die Suche nach dem "@" erfolglos (if (f.eMail.value.indexOf("@") == -1)), wird der Fehler "- korrekte eMail-Adresse" ausgegeben.

Zusätzlich besteht auch die Möglichkeit die o.g. Überpfüngen miteinander zu koppeln:
1. Überprüfung, ob im entsprechenden Feld eine Eingabe erfolgt
2. Überprüfung, ob mehr als 7 Zeichen eingegeben wurden
3. Überprüfung, ob die Eingabe ein "@" enthält
4. Überprüfung, ob nach dem "@" ein Punkt folgt

Quelltext-Auszug:

if (f.eMail.value == ""){
fehler += "- deine eMail-Adresse\n";
}

else {
if (f.eMail.value.length < 7){
fehler += "- eMail-Adresse ist zu kurz\n";
}
else {
if (f.eMail.value.indexOf("@") == -1){
fehler += "- eine korrekte eMail-Adresse\n";
}

else {
if (f.eMail.value.indexOf(".", f.eMail.value.indexOf("@")) == -1){
fehler += "- nach dem @ muss ein Punkt folgen\n";
}

}

}

}
Hier wird überprüft, ob eine Eingabe erfolgt. Ist dies der Fall wird dann mit else ein zweite Bedingung abgefragt.
Eine weitere Überprüfung ist, ob ein Punkt dem "@" folgt.


^ zum Seitenanfang ^


Überprüfung einer Telefonnummer


Neben der eMail-Adresse kann man natürlich auch eine Telefonnummer überprüfen. Hierbei sollte man sich jedoch bewusst sein, welche Formen es gibt eine Telefonnummer anzugeben.
Hier sind Möglichkeiten:
for (var i = 0; i < f.Telefon.value.length; i++) {
if ((f.Telefon.value.charAt(i) > "9" || f.Telefon.value.charAt(i) < "0") &&
f.Telefon.value.charAt(i) != "/" &&
f.Telefon.value.charAt(i) != " " &&
f.Telefon.value.charAt(i) != "-" &&
f.Telefon.value.charAt(i) != "+" &&
f.Telefon.value.charAt(i) != ")" &&
f.Telefon.value.charAt(i) != "(" &&
f.Telefon.value.charAt(i) != "]" &&
f.Telefon.value.charAt(i) != "[" &&
f.Telefon.value.charAt(i) != "'") {
fehler += "\t- korrekte Telefonnummer\n";
break;
}

}
Zu Beginn wird eine Schleife mit for initialisiert. Der Zähler wird mit 0 gestartet (var i = 0;), ist kleiner als die Anzahl Zeichen, die im Formularelement "Telefon" sind (i < f.Telefon.value.length;) und wird immer um 1 erhöht (i++).

Nun werden die Zeichen überprüft, die erlaubt sind. Hier kommt charAt() zum Einsatz. Mit charAt wird ein Zeichen zurückgeliefert, was sich an einer bestimmten Position befindet. Der Wert in der Klammer gibt die Position an. In unserem Fall ist es die Variable i, dessen Position sich immer um eine Stelle verschiebt.
Im obigen Beispiel wird überprüft, ob eine Zahl grösser als 9 oder kleiner als 0 ist. Dann wird geprüft, ob vorkommt.
Wird ein anderes Zeichen gefunden, so wird die Fehlermeldung herausgegeben.
Wichtig ist, dass am Ende ein break; notiert wird, da sonst u.U. mehrere Male ein Fehler geschrieben wird, wenn mehrere Zeichen falsch sind. Mit break; wird die Schleife direkt nach Fund des ersten falschen Zeichens gestoppt.


^ zum Seitenanfang ^


Überprüfung einer Passworteingabe

Der Formmailer von Onlex.de verfügt unter anderem über eine Passwort Funktion um sich effektiv vor Spam zu schützen.
Bei einer falschen Passworteingabe wird der Absender automatisch auf die von Onlex.de generierten oder vom Benutzer definierten Fehlerseite weitergeleitet.
Man kann jedoch vorher schon prüfen, ob ein korrektes Passwort eingegeben wurde.

Quelltext-Auszug:

if (f.onlex_password.value == ""){
fehler += "- Anti-Spam-Kontrolle\n";
}

else {
if (f.onlex_password.value != "trowssap"){
fehler += "- Passwort der Anti-Spam-Kontrolle ist falsch \n";
}

}
Zuerst wird überprüft, ob überhaupt eine Eingabe erfolgt ist. Die Funktionsweise wurde im Unterkapitel "einfache Überprüfung mehrerer Eingabefelder" beschrieben.
Desweiteren wird nun auf eine bestimmte Zeichenkette überprüft:
Ist der Wert (value) im Feld onlex_password ungleich (!=) dem Passwort (hier: "trowssap"), gib den Fehler "- Passwort der Anti-Spam-Kontrolle ist falsch" in einer Variablen (fehler +=) aus.

Man kann diese Passwortfunktion auch noch anders anwenden. Wenn der Benutzer sich für einen Service anmelden soll und hierfür ein Passwort doppelt angeben muss, um Schreibfehler zu vermeiden, dann kann man die eingegebenen Passwörter miteinander vergleichen:

Quelltext-Auszug:

if (f.passwort1.value != f.passwort2.value){
fehler += "- die eingegebenen Passwörter stimmen nicht überein\n";
}
Wichtig: Damit die oben angebene Funktion auch greift, müssen die entsprechenden Felder die korrekten Bezeichnungen haben. Adaptiert an die obige Prüfung, muss der Quellcode wie folgt lauten:

Passwort:<br>
<input type="password" name="passwort1" size="20"><br>
<br>
Passwort-Wiederholung:<br>
<input type="password" name="passwort2" size="20">

^ zum Seitenanfang ^


Überprüfung von Checkboxen

Bei Checkboxen sieht die Abfrage ein wenig anders aus:

Quelltext-Auszug:

if (!f.CHECKBOXNAMEN.checked){
fehler += "- CHECKBOXNAMEN\n";
}
Auch hier: Falls die Checkbox mit dem Namen "CHECKBOXNAMEN" nicht (!) ausgewählt (checked) wurde, gib den Fehler "- CHECKBOXNAMEN" in einer Variablen (fehler +=) aus.

Falls man aber mehrere Checkboxen zu kontrollieren hat, wobei mindestens eine ausgewählt werden muss, dann muss man auf folgenden Code-Schnippsel zurückgreifen:

Quelltext-Auszug:

if (!f.CHECKBOX1.checked && !f.CHECKBOX2.checked && !f.CHECKBOX3.checked){
fehler += "- Auswahl aus Checkbox Gruppennamen\n";
}
Falls die Checkbox "CHECKBOX1" und (&&) "CHECKBOX2" und "CHECKBOX3" nicht (!) ausgewählt (checked) wurden (also KEINE Checkbox), gib den Fehler "- Auswahl aus Checkbox Gruppennamen" in einer Variablen (fehler +=) aus.

"CHECKBOX1", "CHECKBOX2" usw. müssen die tatsächlichen Namen der Checkboxen enthalten.

Wird bei den Checkboxen mit Arrays gearbeitet, so wird der Quelltext wie im folgenden Kapitel "Überprüfung von Radiobuttons" gehandhabt.


^ zum Seitenanfang ^


Überprüfung von Radiobuttons

Die Abfrage bei Radiobuttons ist ähnlich:

Quelltext-Auszug:

if (!(f.RADIO[0].checked || f.RADIO[1].checked)){
fehler += "- Auswahl aus Radiobutton Gruppennamen\n";
}
Falls keine (!) Auswahl zwischen den Radiobuttons (RADIO[0] / RADIO[0]) getroffen wurde, gib den Fehler "- Auswahl aus Radiobutton Gruppennamen" in einer Variablen (fehler +=) aus.

"RADIO" muss den tatsächlichen Namen der Radiobutton-Gruppe enthalten.


^ zum Seitenanfang ^


Überprüfung von Auswahllisten

Die Abfrage von Auswahllisten sieht in etwa so aus:

Quelltext-Auszug:

if (f.Auswahlliste.selectedIndex==0){
fehler += "- Auswahlliste\n";
}
Bei dieser Abfrage wird festgestellt, ob der erste Eintrag im <option>-Befehl ausgewählt wurde. Meistens lautet dieser "Bitte wählen" und sollte ja nicht ausgewählt sein ;-)


^ zum Seitenanfang ^


Ausgabe der Fehlermeldung

Damit nicht nur einfach die Namen der Felder ausgegeben werden und der Benutzer nicht weiss, was er mit dieser Information anfangen soll, so kann man eine Art Begleittext schreiben, wo dann die einzelnen Fehlermeldungen integriert werden.

Quelltext-Auszug:

if (fehler != ""){
var fehlertext = "Die folgenden Felder wurden nicht vollständig ausgefüllt:\n\n";
fehlertext += fehler;
alert(fehlertext + "\nBitte füll die Informationen noch aus. Danke.");
return false;
}
Kurze Erklärung zum obigen Quelltext-Ausschnitt:
Wenn (if) sich der Wert der Variable fehler unterscheidet (!=) von einem leeren Wert (""), dann gib folgenden Fehlertext (fehlertext) mit dem Fehler (fehler) als Dialogfenster (alert) aus.
Der Fehlertext wurde ebenfalls in eine Variable gesteckt: var fehlertext =.


↑ zum Seitenanfang ↑



© 2002 - 2022 · www.onlex.de - HomepageTools | Impressum | Sitemap