Hauptmenü

Untermenü

JavaScript - Praxistutorial 2 - Formularinhalte überprüfen

1. Die Abschnitte

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 (0form.elements.lengthi++)
  {
  
  }
}

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 (0form.elements.lengthi++)
{
  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