 |
J a v a s c r i p t I. |
 |
|
Fehlerprüfung per JavaScript I.
Warum sollte eine Fehlerprüfung stattfinden ?
Klickt ein Anwender direkt auf den Absende-Button (...oh...mal sehen, was passiert ;-) so erhält man eine leere Antwortmail.
Oder der Anwender vergisst einige Elemente auszufüllen/anzukreuzen, so dass man eine unvollständige Antwortmail bekommt.
Auch wenn alle Felder korrekt ausgefüllt worden, so kann z.B. die Email-Adresse versehentlich falsch sein (vielleicht wurde das "@-Zeichen" oder der Punkt innerhalb der Email-Adresse vergessen).
Bei diesem Beispiel erfolgt eine einfache, aber schon vielversprechende Prüfung der Eingaben.
Teste doch einmal!
Unterhalb des Beispiel-Formulars findest Du die entsprechenden Erklärungen anhand des JavaScript-Codes.
Wie funktioniert das denn jetzt?
JavaScript spricht die Formularelemente über deren Namen an (Du erinnerst Dich ? Diese Namen haben wir ja in Kapitel 1 mit dem Attribut "name" vergeben). Dieses Wissen erleichtet uns das Lesen des JavaScriptes.
Wir schreiben eine JavaScript-Funktion und nennen diese 'checkForm()'. Zwischen die beiden geschweiften Klammern setzen wir dann die Abfragen für die einzelnen Formular-Felder. Die komplette Funktion wird innerhalb des "head-Bereiches" der HTML-Seite platziert.
<SCRIPT LANGUAGE="JavaScript">
function checkForm()
{
...Abfragen der Felder ...
}
//-->
</script>
So, der Reihe nach jetzt die Prüfung der Felder. Fangen wir mit dem ersten Element an:
Textfeld: DEIN NAME (der Anwender soll seinen Namen eingeben):
Prüfung: Leere Zeichenkette / Länge der Eingabe in Zeichen.
if(document.mailer.d_name.value=="")
{
alert ("Bitte Deinen Namen eingeben");
document.mailer.d_name.focus();
return false;
}
Damit wird geprüft, ob ein Eintrag im entsprechenden Feld vorgenommen wurde.
Das lässt sich wie folgt lesen:
Wenn (if) der Wert (value) des Elements names "d-name", welches sich innerhalb des Formulars names "mailer" im aktuellen HTML-Dokument (document) befindet, leer ist, d.h. kein Zeichen enthält (==" ") und somit keine Eingabe, dann löse eine Anweisung aus.
Und zwar:
Gib als Hinweisbox (alert)den Text: " Bitte Deinen Namen angeben " auf dem Bildschirm aus.
Die Methode "focus()" setzt den Cursor wieder in das Eingabefeld zur Neueingabe (Der Cursor blinkt ...). Die Anweisung:" document.mailer.d_name.focus();" bedeutet deshalb: Fokussiere das Textfeld namens "d_name" welches sich innerhalb des Formulares names "mailer" in dieser HTML-Seite befindet.
Die letzte Anweisung - " return false " - erzeugt einen Abbruch an dieser Stelle und verhindert, das die nachfolgenen JavaScript Abfragen weiter abgearbeitet werden.
Die nächste Prüfung für das selbe Formularelement betrifft die Länge der eingegebenen Zeichen.
Wenn also der Anwender nur einen einzelnen Buchstaben oder auch zwei Buchstaben eingibt - so greift zwar die oben genannte erste Fehlerabfrage (keine Eingabe) nicht - wohl aber diese.
if( document.mailer.d_name.value.length <2 )
{
alert ("Dein Name sollte doch schon aus zwei Zeichen bestehen");
document.mailer.d_name.focus();
return false;
}
Wenn (if) die Länge (length) des Wertes (value), d.h. die Eingabe beim Element names "d-name", welches sich innerhalb des Formulars names "mailer" im aktuellen HTML-Dokument (document) befindet, weniger als zwei Zeichen (<2 , das heisst: kleiner als zwei) beträgt, dann löse eine Anweisung aus.
Besonders anzumerken sei in diesem Zusammenhang das JavaScript hier - so wie auch generell - die Zählung mit der Zahl Null (0) beginnt. Vor der "2" kommen also in der "JavaScript-Zählweise" noch die Zahlen "0" und "1".
Die Anweisung ist auch hier eine Textausgabe per Hinweisbox, die Fokussierung auf das Eingabefeld und die Abbruch-Anweisung wie folgt:
Bildschirmausgabe als Hinweisbox (alert) des Textes: " Der Name sollte mindestens 2 Zeichen enthalten " .
Der Cursor wird mit der Methode "focus()" in das Eingabefeld gesetzt (document.mailer.d_name.focus();)
und die Anweisung:" return false " - bricht das Script ab.
Textfeld: DEINE E-MAIL (der Anwender soll seine Email eingeben):
Prüfung: Leere Zeichenkette / AT-Zeichen ( @ ) und Punkt ( . ) enthalten? .
Die Prüfung auf eine leere Zeichenkette hin, kennen wir ja bereits. Da es sich jetzt um das Email-Eingabefeld handelt, erfolgt das Ansprechen des Feldes sowie auch das Setzen des Fokus über den (von uns vergebenen) Namen "d-mail".
if (document.mailer.d_mail.value=="")
{
alert ("Bitte eine Email eingeben");
document.mailer.d_mail.focus();
return false
}
Mit der Methode "indexOf()" wird geprüft, ob der Eintrag im Eingabefeld bestimmte Zeichen enthält.
"-1" bedeutet: "nicht Inhalt der Zeichenkette".
Anders gesagt: Im Eingabefeld können beliebig viele Zeichen (von 0 bis ....)stehen. Hat ein Zeichen den Wert "-1" so befindet es sich vor dem ersten Zeichenwert (0) - wie schon erwähnt beginnt in JavaScript die Zählung bei "0" statt wie gewohnt bei "1" - und somit ausserhalb der Zeichenkette, d.h. kommt nicht darin vor.
if(document.mailer.d_mail.value.indexOf('@')==-1
||document.mailer.d_mail.value.indexOf('.')==-1)
{
alert ("Eine gültige Emailadresse muss \n '@' (At-Zeichen)
und einen '.' (Punkt)\n
enthalten.");
document.mailer.d_mail.focus();
return false
}
Erklärung:
Wenn (if) das Zeichen "@" oder ( || ) das Zeichen "." nicht Bestandteil der Zeichenkette (Eingabe) des Feldes namens "d-mail" sind - nämlich "gleich -1" (== -1), dann löse eine "alert-Fehlermeldung" aus.
Übrigens: Innerhalb der "alert-Anweisung" sorgt das Zeichen " \n " für einen Zeilenumbruch im Hinweisfenster.
Auswahl-Liste: DIE NOTE (der Anwender soll eine Note eingeben):
Prüfung: Wurde überhaupt ein Wert ausgewählt? .
if (document.mailer.bewertung_note.options.value=="bit_auswaehlen")
{
alert ("Bitte Treffen Sie doch eine Noten-Auswahl ");
return false
}
Abgefragt wird bei diesem Auswahl-Listen-Feld der erste Wert, nämlich die Option "Bitte auswählen".
Wurde nämlich diese Option gewählt, so heisst das im Umkehrschluss, dass eben keine der anderen Optionen angeklickt wurden (keine Auswahl).
Die Übersetzung des Quellcodes:
Wenn (if) der Name (value) des ausgewählten Listeneintrages (options)- welcher sich in der Auswahl-Liste namens "bewertung_note" im Formular "mailer" befindet - ist gleich (==)"bit_ auswaehlen", dann löse eine Fehlermeldung aus.
Checkbox: ZU VERBESSERN(der Anwender soll eine oder mehrere Checkboxen anklicken):
Prüfung: Wurde mindestens eine Checkbox ausgewählt? .
Mit der Eigenschaft "checked" wird geprüft, ob eine Checkbox angeklickt und damit ausgewählt wurde (Häkchen erscheint in der Box).
Checked==false heisst "Nicht angeklickt";
checked==true heist "Angeklickt".
Abgefragt wird mit dem kaufmännischem UND (&&), welches nur dann einen Wahrheitswert (true) zurückgibt, wenn alle damit verbundenen Aussagen richtig sind.
if(document.mailer.verbesserung_inh.checked==false
&&
document.mailer.verbesserung_lay.checked==false
&&
document.mailer.verbesserung_langs.checked==false
&&
document.mailer.verbesserung_nichts.checked==false
)
{
alert("Bitte kreuzen Sie doch ein oder mehrere Felder
bei ' Zu verbessern? ' an.");
return false
}
Wenn (if) die Checkbox namens "verbesserung_inh" nicht angeklickt ist (==false)
und (&&)
die Checkbox namens "verbesserung_layu" nicht angeklickt ist (==false)
und (&&)
die Checkbox namens "verbesserung_langs" nicht angeklickt ist (==false)
und (&&)
die Checkbox namens "verbesserung_nichts" nicht angeklickt ist (==false)
- das heisst: keine der Boxen wurde geklickt -
dann gib eine "alert-Fehlermeldung" aus.
Radio Buttons: INFORMATION PER E-MAIL? (der Anwender soll einen der beiden Buttons anklicken):
Prüfung: Wurde einer der Buttons ausgewählt? .
Auch hier erfolgt die Prüfung über die Eigenschaft "checked".
radio1=
document.forms[0].elements[7].checked;
radio2=
document.forms[0].elements[8].checked;
if(radio1 == false && radio2 == false)
{
alert (" Bitte wählen Sie JA oder NEIN:' Neue Inhalte per Email? ' ");
return false
}
Wichtig:
Die Radio Buttons können jedoch nicht, wie vorher üblich, über deren Namen angesprochen werden. Wie in Kapitel I erläutert müssen die Radio Buttons innerhalb einer Gruppe den selben Namen tragen (da nur eine Auswahl erlaubt ist). Wir hatten für beide Radio Buttons den Namen "ra_info" vergeben.
Deshalb sprechen wir die Radio Buttons über die Reihenfolge ( [] ) des Vorkommens innerhalb der Webseite (document) an.
Für die spätere Abfrage speichern wir den Standort der Radio Buttons in den Variablen "radio1" und "radio2".
Innerhalb des ersten Formulars ( forms [0] )auf der Webseite (wir haben ja bisher nur eines, könnten jedoch evt. auch später noch mehrere anlegen....)ist der erste Radio Button an 7.ter Position und der zweite Radio Button an 8.ter Position.
Gezählt werden die Elemente ( elements [] ) des einzelnen Formulares, beginnend mit null.
Übersicht:
Das erste Formular ( [0] ) enthält die Elemente:
Eingabefeld1 = [ 0 ]
Eingabefeld2 = [ 1 ]
Auswahl-Liste = [ 2 ]
Checkbox1 = [ 3 ]
Checkbox2 = [ 4 ]
Checkbox3 = [ 5 ]
Checkbox4 = [ 6 ]
RadioButton1 = [ 7 ]
RadioButton2 = [ 8 ]
Eingabefeld3 = [ 9 ]
Löschen = [ 10 ]
Abschicken = [ 11 ]
Textfeld, gross: KOMMENTAR (der Anwender soll einen Text eingeben):
Prüfung: Leere Zeichenkette / Länge des Eingabetextes .
if(document.mailer.comment.value=="")
{
alert ("Bitte gib doch einen kurzen Kommentar ein. ");
document.mailer.comment.focus();
return false;
}
if(document.mailer.comment.value.length < 15)
{
alert ("Mehr als 15 Zeichen sollte es schon sein ;-) ");
document.mailer.comment.focus();
return false;
}
Gefragt wurde, ob die Länge des Eingabewertes kleiner als 15 Zeichen ist ( < 15 ).
Reset-Button: LÖSCHEN ( der Anwender hat die Möglichkeit die Eingaben zu löschen):
Submit-Button: ABSCHICKEN( der Anwender versendet das Formular nur, wenn es der Fehlerprüfung Stand hält. ):
<input type="Submit" value="Abschicken" onclick="return checkForm()" >
Mit dem Ereignis "onclick" wird die Funktion "checkForm()" aufgerufen.
Mit anderen Worten:
Ein Klick auf den Absende-Button löst das Abarbeiten unseres Formularprüfungs-JavaScriptes aus.
QUELLTEXT, komplette HTML-Seite mit Formular und JavaScript-Fehlerprüfung:
| © www.on-mouseover.de |   |
|