JavaScript: Form Check Text Field


In (fast) jedem Formular gibt es Pflichtfelder. Eine Auswertung der Felder kann natürlich in dem Programm erfolgen, das vom Formular aufgerufen wird (hier: auswertung.php). Sinnvoller ist es, die Eingaben im Formular zu prüfen, bevor die Formularinhalte verschickt werden. Durch entsprechende, farbliche Kennzeichnung der nicht ausgefüllten Pflichtfelder kann der Benutzer auf die Fehleingaben hingewiesen werden. Alternativ können Warnungen angezeigt werden.

HTML Code:
<form action="auswertung.php" method="post" onsubmit="return validateForm()" name="frmEingabe"><br>
Vorname: <input type="text" name="Vorname" size="30"><br>
<br>
<input type="submit" value="Speichern"><br>
</form>


Wird der HTML Code ausgeführt, erscheint ein einfaches Formular mit einem Textfeld.

Formular

Beim Klick auf Speichern wird die JavaScript Funktion validateForm() aufgerufen.

JavaScript Code:
function validateForm()
{
x = document.frmEingabe.Vorname.value;
if (x == null || x == "")
{
document.frmEingabe.Vorname.style.backgroundColor = "yellow";
alert("Bitte Vornamen eingeben");
return false;
}
else
{
document.frmEingabe.Vorname.style.backgroundColor = "white";
}
}

In der Variablen x wird der Wert des Feldes Vorname im Formular frmEingabe gespeichert. Ist die Variable leer (d.h. es wurde im Feld Vorname nichts eingegeben), wird die Hintergrundfarbe des Textfelds Vorname auf gelb geändert, ein Popup Fenster weist auf die fehlende Eingabe hin und die Funktion liefert als Rückgabewert false. Das Formular kann nicht abgeschickt werden.

Wird mindestens ein Zeichen im Feld Vorname eingegeben, dann setzt die JavaScript Funktion dir Hintergrundfarbe auf weiß. Die Funktion liefert true zurück. Das Formular wird abgeschickt.

Hinweis:
Die JavaScript Funktion wird üblicherweise im Header Bereich (<head> ... </head>) innerhalb des script Tags (<script> ... </script>) eingebettet.