JavaScript - Praxistutorial 2 - Formularinhalte überprüfen
1. Die Abschnitte
- Überblick
- Vorbereitung
- Formularinhalte überprüfen
- Diverse Feinarbeiten
- Formularelemente deaktivieren
- Formularelemente abfragen
- Formularelemente manipulieren
2. Ein Hinweis zuvor
Hier werde ich euch mit ein paar grundsätzlichen Dingen vertraut machen. Daher ist die Vorgehensweise auch alles andere als optimal. Ich mache es aber trotzdem, um euch verschiedene Möglichkeiten zu zeigen.
3. Die Pflichtfelder
... befinden sich alle im linken Block des Formulars. Um die im rechten kümmern wir uns erst mal nicht. Zunächst müssen wir dafür sorgen,
dass das auszuwertende Script send.php nicht automatisch angesteuert wird. Dazu verpassen wir dem Formular in der
formular.htm folgenden Event-Handler.
<form action="send.php" ... onsubmit="return checkForm();">
Erläuterung
Das onsubmit reagiert dann, wenn wir das Formular versenden, also zum Beispiel durch einen Klick auf den
submit-Button. Dabei rufen wir die Funktion checkForm(); auf, die die Überprüfung vornimmt. Ganz wichtig ist
das return. Warum? Nun ohne dieses klitzekleine Wort wird das Formular auf jeden Fall versendet. Das Procedere läuft wie
folgt ab. Die Funktionn checkForm ermittelt, ob alle Felder gefüllt sind. Wenn nicht, so gibt sie ein false
zurück. Dieses wird dann durch besagtes return an das Formular übergeben. Und das ist das Signal, es nicht(!) an die
send.php zu schicken. Probiert es später mal aus und entfernt das return.
4. Die Funktion checkForm
... definieren wir natürlich in der check.js. Zunächst mal benötigen wir zwei Variablen. In der ersten (message)
legen wir den Beginn einer Fehlermeldung fest. Die zweite (send) ist unsere "Steuerungsvariable".
function checkForm ()
{
var message = 'Die folgenden Felder ausfüllen, du Torfnase!' + "\n\n";
var send = true;
}
Die Elemente durchlaufen
Was jetzt kommt, habe ich Anfangs schon beschrieben (samt Begründung), nämlich ein eher unglückliches Vorgehen. Wir werden jetzt alle Elemente des Formulars durchlaufen. Und das geschieht mit
function checkForm ()
{
...
for (i = 0; i < form.elements.length; i++)
{
}
}
Erläuterung
form haben wir ja im vorherigen Abschnitt beim onload als Referenz auf das Formular festgelegt (form =
document.jobangebot;). Mit elements werden nun alle Elemente darin in einem Array abgespeichert, wobei jedes in der
Reihenfolge seines Auftretens einen numerischen Index bekommt. Und mittels length bekommen wir die Größe des Arrays, das wir
dann in der Schleife durchlaufen.
Typprüfung
for (i = 0; i < form.elements.length; i++)
{
if ('text' == form[i].type || 'select-one' == form[i].type)
{
...
}
}
Erläuterung
Jetzt wollen wir aber nicht alle Formularelemente überprüfen, sondern nur die im linken Bereich. Und haben wir nur Felder vom Typ
<input type="text"> und <select>. Die kann man jetzt wunderbar mit type abfragen. Ein
Hinweis. Das select-one ergibt sich daraus, dass man nur ein Element auswählen kann. Hätten wir das in der
formular.htm mit dem Attribut multiple versehen, so wäre das Ergebnis select-multiple gewesen.
Inhalte überprüfen
if ('text' == form[i].type || 'select-one' == form[i].type)
{
if ('' == form[i].value || '???' == form[i].value)
{
message += form[i].name + "\n";
form[i].value = '???';
send = false;
}
}
Erläuterung
Hier gehen wir erst mal den einfachsten Weg und prüfen, ob Inhalte überhaupt vorhanden sind und nicht aus ??? bestehen. Das
mit den Fragezeichen ist einfach zu erklären. Wenn in dem entsprechenden Feld nichts enthalten ist, so verpassen wir sie dem mit
form[i].value = '???';. Das message += form[i].name + "\n"; ist eine einfache Zeichenkettenverknüfung, die wir
später im Bedarfsfall in der alert-Box ausgeben. Ach ja, das \n ist ein Steuerzeichen für einen
Nicht-HTML-Zeilenumbruch. Wegen der Fehlermeldung, weil sonst alles in einer Zeile steht. Und mit send = false; legen wir
fest, dass die Eingabe fehlerhaft ist und das Formular nicht versendet werden soll.
Noch etwas
Das form[i].value = '???'; funktioniert bei den <input type="text">-Elementen wunderbar. Nur beim
<select>-Feld ist es ziemlich sinnfrei. Eigentlich müsste man an der Stelle noch mit einem zusätzlichen if
('text' == form[i].type) arbeiten, da sich das value hier auf die <option>-Elemente bezieht.
Aber das habe ich mir einfach mal erspart.
Entsprechenden Wert zurückgeben
function checkForm ()
{
...
// Nach(!) der for-Schleife
if (false == send)
{
alert (message);
return false;
}
else
{
return true;
}
}
Erläuterung
Das ist eigentlich ganz einfach. Sobald auch nur ein Feld falsch ausgefüllt wurde, erscheint eine alert-Box mit dem Hinweis
auf Selbige. Und das mit dem return habe ich ja schon oben erklärt. Solltet ihr das auf einem entsprechenden
System testen, so müsstet ihr bei einem korrekt ausgefüllten linken Bereich die
PHP-Ausgabe mittels print_r zu Gesicht bekommen.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt