JavaScript kann Formulare überprüfen, um sicherzustellen, dass Benutzer:innen ihre Daten korrekt und vollständig eingegeben haben.
Eine Überprüfung des Formulars sollte server- als auch clientseitig erfolgen. Die serverseitige Überprüfung sorgt für die sichere Datenübernahme und funktioniert auch bei im Browser abgeschaltetem JavaScript. Die clientseitige Überprüfung mittels JavaScript erhöht die effiziente Bedinbarkeit, da bei einem Fehler die Seite nicht neu geladen werden muss.
Wir möchten folgendes Kontaktformlar nun clientseitig mit JavaScript auf leere Felder überprüfen.
Sourcecode HTML
| <!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formular mit JavaScript</title>
<!-- die Datei zur Funktion ist bisher noch leer -->
<script src="js_pruefung.js" type="text/javascript"></script>
</head>
<body>
<h1>Kontaktformular</h1>
<form action="daten.html" onsubmit="return pruefung();">
<fieldset style="text-align: right; width: 450px;">
<legend>Ihre Daten</legend>
Vorname: <input name="vorname" type="text" size="30" maxlength="30"><br>
Nachname: <input name="nachname" type="text" size="30" maxlength="30"><br>
E-Mail Adresse: <input name="email" type="text" size="30" maxlength="30"><br>
Telefonnummer: <input name="telefon" type="text" size="30" maxlength="30"><br>
Postleitzahl: <input name="plz" type="text" size="30" maxlength="5"><br>
Ort: <input name="ort" type="text" size="30" maxlength="30"><br>
<select name="land">
<option>Wählen Sie Ihr Land:</option>
<option value="Deutschland">Deutschland</option>
<option value="Österreich">Österreich</option>
<option value="Schweiz">Schweiz</option>
</select><br>
<input type="radio" name="kundenart" value="g"> Geschäftskunde
<input type="radio" name="kundenart" value="p"> Privatkunde<br>
Kontakt per:
<input type="checkbox" name="kontaktTele"> Telefon
<input type="checkbox" name="kontaktMail"> E-Mail<br>
</fieldset>
<fieldset style="text-align: right; width: 450px;">
<legend>Ihre Nachricht</legend>
<textarea name="mitteilung" cols="40" rows="6"></textarea>
<br>
</fieldset>
<p>
<input type="submit" value="Abschicken">
<input type="reset" value="Löschen">
</p>
</form>
</body>
</html>
|
So sieht es im Browser aus
Kontaktformular
Sourcecode JavaScript
| function pruefung() {
// Inhalt kommt noch
return true;
}
|
Wie wir sehen, enthält der JavaScript-Sourcecode zwar eine Funktion, jedoch keinerlei Anweisungen. Wir werden den Sourcecode jetzt Stück für Stück ergänzen, sodass das Formular vollständig überprüft wird.
Das <form>
-Element enthält das Attribut onsubmit
, einen Event-Handler, der beim Abschicken ausgelöst wird. Dieser ruft den return
-Wert der Funktion pruefung();
auf, und nur beim Wert true
wird das Formular abgeschickt.
<form action="daten.html" onsubmit="return pruefung();">
Die nachfolgenden Sourcecodeteile der einzelnen Abschnitte gehören der Reihe nach zur Funktion pruefung();
. Durch das Einfügen in die Funktion entsteht am Ende eine vollständige Prüfungsfunktion.
Arrays zur Datenaufnahme und Überprüfung der Felder
Um die Formulardaten zu überprüfen, wird das Array document.forms
erstellt, in dem alle Formulare des HTML-Dokuments gespeichert werden. Wir haben nur ein Formular mit einem <form>
-Tag.
Also jetzt kommt das DOM in Spiel!
- Wir haben in HTML immer ein
document
im DOM-Baum.
- Wenn in dem HTML-Dokument ein Formular mit einem
<form>
-Tag vorhanden ist, dann haben wir document.forms[0]
für das erste Formular (meist gibt es nur ein Formular auf einer Seite).
- Jetzt weisen wir das Formular der JavaScript-Variablen
form =...
zu (um die Schreibweise abzukürzen).
| // Initialisierung des Arrays - Zugriff auf das erste Formular der Seite
let form = document.forms[0];
|
-
Die Elemente eines Formulars sind dann der Reihe nach in document.forms[0].elements[]
gespeichert, wobei die Elemente auch mit dem richtigen Namen angesprochen werden können, also das erste Formularfeld zur Abfrage des Vornamens mit document.forms[0].elements[0]
oder alternativ mit document.forms[0].vorname
oder alternativ, da wir let form = document.forms[0]
geschrieben haben, mit form.vorname
erreichbar.
-
form.vorname
enthält also den Namen des Elements (= die Variable).
- Mit
form.vorname.value
kann man dann auf den Wert der Variable zugreifen und vergleichen, ob darin ein leerer String ist.
| // Initialisierung des Arrays - Zugriff auf das erste Formular der Seite
let form = document.forms[0];
// Überprüfung des Textfeldes Vorname
if (form.vorname.value === "") {
return false;
}
|
Die Überprüfung unserer <input>
-Elemente lautet damit:
| function pruefung() {
let form = document.forms[0]; // Zugriff auf das erste Formular der Seite
if (form.vorname.value === "") {
return false;
}
if (form.nachname.value === "") {
return false;
}
if (form.email.value === "") {
return false;
}
if (form.telefon.value === "") {
return false;
}
if (form.plz.value === "") {
return false;
}
if (form.ort.value === "") {
return false;
}
return true; // Wenn alle Felder ausgefüllt => Formular abgesenden
}
|
Fehlermeldung noch spezifischer erstellen
Über die oben gezeigte Überprüfung dürften wir uns schon alle mal geärgert haben, wenn nur gezeigt wird, das ein Fehler aufgetreten ist und wir selbst nachsehen müssen, wo dieser Fehler sein könnte. Hier machen wir es besser:
| function pruefung() {
// Initialisierung des Arrays
let form = document.forms[0];
// fehler wird die Namen der nicht ausgefüllten Felder beinhalten
let fehler = "";
// Überprüfung der Textfelder
if(form.vorname.value === ""){
fehler = fehler + "Vorname ";
}
if(form.nachname.value === ""){
fehler = fehler + "Nachname ";
}
if(form.email.value === ""){
fehler = fehler + "E-Mail ";
}
if(form.telefon.value === ""){
fehler = fehler + "Telefon ";
}
if(form.plz.value === ""){
fehler = fehler + "Postleitzahl ";
}
if(form.ort.value === ""){
fehler = fehler + "Ort ";
}
/* ====== Fehlermeldung ====== */
if(fehler != ""){
let fehlerText = "Sie haben folgende Felder nicht ausgefüllt:\n";
fehlerText = fehlerText + fehler;
window.alert(fehlerText);
return false;
}
return true;
}
|
Auswahllisten (=Dropdown) überprüfen
Dropdown-Box in HTML
| <select name="land">
<option>Wählen Sie Ihr Land:</option>
<option value="Deutschland">Deutschland</option>
<option value="Österreich">Österreich</option>
<option value="Schweiz">Schweiz</option>
</select><br>
|
Wir haben hier ein <select>
-Element mit einem name="land"
-Attribut. Die möglichen Auswahl-Optionen (<option>
) haben eine boolsche Eigenschaft selected
, die eine ausgewählte Option angibt. Um festzustellen, wie viele Optionen ausgewählt wurden (bei multiple-Choice-Listen ist auch mehr als eine möglich), wird ein Zähler (selectedIndex
) verwendet, der am Ende nicht Null sein darf:
So kommen wir auf folgenden JavaScript-Sourcecode:
| if (form.land.selectedIndex === 0) {
return false;
}
|
Radio-Buttons in HTML
| <input type="radio" name="kundenart" value="g"> Geschäftskunde
<input type="radio" name="kundenart" value="p"> Privatkunde<br>
|
Da bei Radiobuttons immer nur eine Option ausgewählt sein kann, besitzen sie ein identisches name
-Attribut (hier name="kundenart"
). Die Eigenschaft value
liefert hier nicht das gewünschte Ergebnis. Stattdessen wird auf das Array der Radiobuttons zugegriffen, um zu überprüfen, ob sie ausgewählt (boolsche Eigenschaft checked
) sind. Dabei ist darauf zu achten, die Logik korrekt zu formulieren.
| // Ein Radiobutton auswählen
if (!(form.kundenart[0].checked || form.kundenart[1].checked)) {
return false;
}
|
Eine bessere Schreibweise
Falls die Anzahl der Radio-Buttons sehr lang ist oder nicht festgelegt ist oder sich ändern kann, ist eine Schleife eine robustere Lösung:
| let isChecked = false;
for (let i = 0; i < form.kundenart.length; i++) {
if (form.kundenart[i].checked) {
isChecked = true;
break;
}
}
if (!isChecked) {
return false; // Kein Radio-Button ausgewählt
}
|
Checkboxen überprüfen
Checkboxen in HTML
| <input type="checkbox" name="kontaktTele"> Telefon
<input type="checkbox" name="kontaktMail"> E-Mail<br>
|
Checkboxen können ähnlich überprüft werden wie Radiobuttons. Im Gegensatz zu Radiobuttons können jedoch mehrere Checkboxen gleichzeitig aktiviert sein. Die Überprüfung erfolgt auch über die Eigenschaft checked
.
| if (!(form.kontaktTele.checked || form.kontaktMail.checked)) {
return false;
}
|
Eine bessere Schreibweise
Eine bessere (=flexiblere) Schreibweise bekommen wir hin, wenn wir das name
-Attribut nicht einzeln bezeichnen, sondern in einem Array zusammenfassen:
Statt
| <input type="checkbox" name="kontaktTele"> Telefon
<input type="checkbox" name="kontaktMail"> E-Mail<br>
|
schreiben wir nun
| <input type="checkbox" name="kontakt[]" value="telefon"> Telefon
<input type="checkbox" name="kontakt[]" value="mail"> E-Mail<br>
|
Die eckigen Klammern ([]) signalisieren, dass diese Checkboxen nun zu einem Array gehören.
Und dann lassen sich die Checkboxen wieder einfach überprüfen
| let isChecked = false;
for (let checkbox of form.kontakt) {
if (checkbox.checked) {
isChecked = true;
break;
}
}
if (!isChecked) {
return false;
}
|
Und hier für Nerds noch eine "modernere" Schreibweise, auf die wir aber nicht weiter eingehen.
| if (!Array.from(form.kontakt).some(checkbox => checkbox.checked)) {
return false;
}
|
Textarea überprüfen
Zum Schluss sollte noch das Textfeld <textarea>
überprüft werden. Dieses wird genau wie Eingabefelder überprüft, indem die Eigenschaft value
abgefragt wird.
| <textarea name="mitteilung" cols="40" rows="6"></textarea>
|
| if (form.mitteilung.value === "") {
return false;
}
|
Warnmeldung ausgeben
Der aktuelle Sourcecode funktioniert zwar technisch, bietet aber keine sichtbare Rückmeldung bei fehlenden Eingaben. Um uns klar anzuzeigen, welche Felder nicht korrekt ausgefüllt wurden, können wir alle Fehlermeldungen sammeln und gemeinsam ausgeben. Hierzu verwenden wir eine Variable fehler
, die alle aufgetretenen Fehler speichert.
Am Ende der Überprüfung wird diese Variable ausgewertet: Ist sie nicht leer, wird das Formular nicht abgeschickt und die Fehler werden angezeigt. Dies verbessert die Bedienbarkeit und sorgt dafür, dass schnell erkannt wird, welche Eingaben noch fehlen oder korrigiert werden müssen.
| function pruefung() {
// Initialisierung des Arrays
let form = document.forms[0];
// fehler wird die Namen der nicht ausgefüllten Felder beinhalten
let fehler = "";
// Überprüfung der Textfelder
if (form.vorname.value === "") {
fehler = fehler + "Vorname ";
}
if (form.nachname.value === "") {
fehler = fehler + "Nachname ";
}
if (form.email.value === "") {
fehler = fehler + "E-Mail ";
}
if (form.telefon.value === "") {
fehler = fehler + "Telefon ";
}
if(form.plz.value === ""){
fehler = fehler + "Postleitzahl ";
}
if(form.ort.value === ""){
fehler = fehler + "Ort ";
}
// Überprüfung der Auswahlliste
if (form.land.selectedIndex === 0) {
fehler = fehler + "Land ";
}
// Überprüfung der Radiobuttons
if (!(form.kundenart[0].checked || form.kundenart[1].checked)) {
fehler = fehler + "Kundenart ";
}
// Überprüfung der Checkboxen
if (!(form.kontaktTele.checked || form.kontaktMail.checked)) {
fehler = fehler + "Kontaktart ";
}
// Überprüfung der Textarea
if (form.mitteilung.value === "") {
fehler = fehler + "Ihre Mitteilung ";
}
// Fehlermeldung ausgeben
if (fehler != "") {
const fehlerText = "Die folgenden Felder wurden nicht ausgefüllt:\n" + fehler;
alert(fehlerText);
return false;
}
return true;
}
|
Und hier noch eine "schönere Schreibweise", bei der wir die if-Bedingungen abkürzen und außerdem mit trim()
eingegebenen Leerzeichen am Anfang und Ende eines Strings entfernen.
| function pruefung() {
// Initialisierung des Arrays
let form = document.forms[0];
// fehler wird die Namen der nicht ausgefüllten Felder beinhalten
let fehler = "";
// Überprüfung der Textfelder
if (form.vorname.value.trim() === "") fehler += "Vorname ";
if (form.nachname.value.trim() === "") fehler += "Nachname ";
if (form.email.value.trim() === "") fehler += "E-Mail ";
if (form.telefon.value.trim() === "") fehler += "Telefon ";
if (form.plz.value.trim() === "") fehler += "Postleitzahl ";
if (form.ort.value.trim() === "") fehler += "Ort ";
// Überprüfung der Auswahlliste
if (form.land.selectedIndex === 0) fehler += "Land ";
// Überprüfung der Radiobuttons
if (!(form.kundenart[0].checked || form.kundenart[1].checked)) fehler += "Kundenart ";
// Überprüfung der Checkboxen
if (!(form.kontaktTele.checked || form.kontaktMail.checked)) fehler += "Kontaktart ";
// Überprüfung der Textarea
if (form.mitteilung.value.trim() === "") fehler += "Ihre Mitteilung ";
// Fehlermeldung ausgeben
if (fehler !== "") {
alert("Die folgenden Felder wurden nicht ausgefüllt:\n" + fehler);
return false;
}
return true;
}
|
Das Formular ist nun vollständig überprüfbar, und der Nutzer erhält eine klare Rückmeldung zu fehlenden Eingaben.