Praktikum Internet-Werkzeuge
			Aufgaben  Dokus  Links

JavaScript zum Überprüfen von Formularwerten

Das nervige an Web-Formularen ist die späte Antwort vom Server, wenn eine kleine Eingabe falsch war. Mit JavaScript können die Eingaben im Browser überprüft werden, bevor sie an den Server geschickt werden.

Das Beispiel

Dieses Formular funktioniert nur für Leute, die prInt "gut" finden:

Der Code

<form name="Formular" action="/tools/forms.phtml" method="post" onsubmit="return check()"> Ich finde prInt <input type="text" name="bewertung"/> <input type="submit" value="und ab!"/> </form> <script type="text/javascript"> // <![CDATA[ function check() // Formular auswerten { if(document.Formular.bewertung.value == "gut"){return true;} else{ alert("Bitte eine sinnvolle Bewertung ('gut') eingeben!"); document.Formular.bewertung.focus(); return false; } } // ]]> </script>

Das Event onsubmit wird ausgelöst, wenn die Formularwerte an den Server geschickt werden sollen. Gibt der angegebene Code den Wert false zurück, werden die Daten nicht an den Server versandt. Der hier angegebene Code ist return check(), und liefert das Ergebnis der check() - Funktion zurück.

Die Funktion check() überprüft die Gültigkeit des Eingabefeldes bewertung. Ist der Wert gültig, wird true zurückgegeben, ansonsten wird eine Warnung mit alert() ausgegeben, der Cursor mit focus() auf das fehlerhafte Feld gesetzt und durch die Rückgabe von false der submit-Vorgang abgebrochen.

Die Nutzung der alert() Funktion ist notwendig, um mitzuteilen, dass eine falsche Eingabe getätigt wurde, und um welche Eingabe es sich handelt. Die Nutzung der focus() - Methode ist eine sehr praktische Hilfe für die Anwenderin (oder den Anwender), diese Zeile solltet Ihr den Leuten ruhig spendieren! Die Rückgabe von false ist notwendig, um zu verhindern, dass die Daten an den Server geschickt werden.

Die Überprüfung der Werte mit JavaScript ist keine Garantie für die Korrektheit der Daten, sondern nur eine zusätzliche Hilfe. Ihr müsst immer damit rechnen, dass ein Browser kein JavaScript kann, oder JavaScript abgeschaltet wurde.

Die Links

SelfHtml: JavaScript Objekt-Referenz
SelfHtml: Event-Handler
SelfHtml: Ein umfangreicheres Beispiel zur Formularüberprüfung