287
Kapitel 14
JavaScript mit Webformularen
verwenden
In diesem Kapitel:
JavaScript und Webformulare 288
Formulardaten abfragen 291
Mit Formularinformationen arbeiten 291
Formulardaten vorab prüfen 300
Übungen 306
288
Kapitel 14: JavaScript mit Webformularen verwenden
Nachdem Sie dieses Kapitel gelesen haben, sind Sie in der Lage:
Eingaben auf einem Webformular mithilfe von JavaScript auf Gültigkeit zu überprüfen
mit Optionsfeldern, Auswahlfeldern und Kontrollkästchen zu arbeiten sowie deren Werte und Status
abzufragen
Rückmeldungen je nach Gültigkeitsprüfung zu liefern, und zwar sowohl über ein alert()-Dialogfeld als
auch inline im Dokument
sich auf die Beschränkungen der Formularfeldvalidierung von JavaScript einzustellen
JavaScript und Webformulare
JavaScript wird schon seit längerer Zeit für Webformulare genutzt – normalerweise um durch die so ge-
nannte clientseitige Validierung schnell zu überprüfen, ob ein Benutzer Formularfelder korrekt ausgefüllt hat,
bevor das Formular zum Server geht. Vor JavaScript musste ein Browser das Formular und sämtliche darin
enthaltenen Daten an den Server senden, um – mit der so genannten serverseitigen Validierung – zu gewähr-
leisten, dass alle erforderlichen Felder ausgefüllt sind.
WICHTIG
Wenn Sie mit JavaScript arbeiten, müssen Sie serverseitige Validierung durchführen, für den Fall, dass ein
Benutzer JavaScript deaktiviert hat oder absichtlich etwas Böswilliges unternimmt.
Können Sie sich noch an die alert()-Funktion erinnern, die in früheren Kapiteln dazu gedient hat, einfache
Beispiele zu veranschaulichen? Sie ist zurück! Die Funktion alert() wird häufig genutzt, um Benutzerfeed-
back während der Formularvalidierung bereitzustellen, obwohl neuere Techniken auf das DOM (Document
Object Model) zurückgreifen, um benutzerfreundlicheres Feedback anzuzeigen.
Abbildung 14.1 zeigt als Beispiel eine Webseite mit einem grundlegenden Formular.
Abbildung 14.1 Ein grundlegendes
Webformular
Wenn ein Benutzer dieses Formular absendet, überprüft der JavaScript-Code im Hintergrund, ob das
Te xt fe ld Name ausgefüllt ist. Ist es korrekt ausgefüllt, beispielsweise mit dem Namen »Steve«, zeigt die Seite
den eingegebenen Namen an, wie es in Abbildung 14.2 zu sehen ist.
JavaScript und Webformulare
289
Abbildung 14.2 Ist das Webformular korrekt ausgefüllt, zeigt das Textfeld Name eine Begrüßung an
Hat der Benutzer keine Daten in das Textfeld Name eingetragen, zeigt das Skript ein alert()-Dialogfeld mit
dem Hinweis an, dass der Name erforderlich ist (siehe Abbildung 14.3).
Abbildung 14.3 Das Formular zeigt eine Warnung an, wenn das Textfeld Name leer ist
Der Code, der dies alles realisiert, ist nachfolgend angegeben. Sie finden ihn in der Begleitdatei formvalid.htm
mit dem folgenden HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ein grundlegendes Beispiel</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript">
function formValid(eventObj) {
if (document.forms[0].textname.value.length == 0) {
alert("Name ist erforderlich.");
if (eventObj.preventDefault) {
eventObj.preventDefault();
} else {
window.event.returnValue = false;
}
return false;
} else {
alert("Hallo " + document.forms[0].textname.value);
return true;
}
}
</script>
</head>
<body>
<p>Ein grundlegendes Formularbeispiel</p>
<form action="#">
<p>Name <em>(erforderlich)</em>: <input id="textbox1" name="textname"
type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
Get JavaScript - Schritt für Schritt now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
