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.
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:
-
00491234567890
-
0049 123 456 78 90
-
+49 (123) 456 78 90
-
+49(0)123 456 78-90
-
+49'123'456'78'90
-
usw.
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
-
ein Schrägstrich (
"/"
)
-
ein Leerzeichen (
" "
)
-
ein Minus-Zeichen (
"-"
)
-
ein Plus-Zeichen (
"+"
)
-
eine geschlossene runde Klammer (
")"
)
-
offene runde Klammer (
"("
)
-
eine geschlossene eckige Klammer (
"]"
)
-
offene eckige Klammer (
"["
)
-
ein Apostroph (
"'"
)
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 ↑