Formulardaten Prüfen
als Präsentation ▻Im Kapitel über Formulare haben Sie gelernt, wie Sie mit Javascript die einzelnen Eingabfelder eines Webformulars prüfen können bevor das Formular abgesendet wird.
▻Komplexe Überprüfung
Mit JavaScript kann man noch komplexere Überprüfungen programmieren.
Dazu braucht man das submit event, das vom Formular gefeuert wird,
bevor die Daten gesendet werden.
Zum Beispiel soll in folgendem Formular sicher gestellt werden, dass mindestens 1 Stück bestellt wird:
<form> <label for="schokolade">Tafeln Schokolade:</label> <input type="number" name="schokolade" id="schokolade" value="0"> <label for="schweinsbraten">Portionen Schweinsbraten:</label> <input type="number" name="schweinsbraten" id="schweinsbraten" value="0"> <label for="kaffee">Tassen Kaffee:</label> <input type="number" name="kaffee" id="kaffee" value="0"> <button type="submit">Bestellen</button> </form>
Abfangen des submit Events
Die Überprüfung erfolgt im submit - Event:
document.querySelector("form").addEventListener("submit", function(event) {
// ...
if (!ok) {
event.preventDefault(); // Verhindert das Absenden des Formulars, wenn `ok` false ist
}
});
Eingabefelder Prüfen:
Der Wert eines Eingabefeldes kann mit .value ausgelesen werden:
document.querySelector('input[name="schokolade"]').value;
Achtung: dieser Wert ist immer ein String!
▻Fertiges Programm:
Das fertige Programm zeigt die Fehlermeldungen auch an:
document.querySelector("form").addEventListener("submit", function(event) {
var ok = true;
// Entfernen alle Fehlermeldungen
document.getElementById("display_errors").innerHTML = "";
console.log(document.querySelector("input[name=schokolade]").value);
// Berechnen der Gesamtsumme
var gesamtZahl = parseInt(document.querySelector("input[name=schokolade]").value)
+ parseInt(document.querySelector("input[name=schweinsbraten]").value)
+ parseInt(document.querySelector("input[name=kaffee]").value);
// Überprüfen der Gesamtsumme
if(gesamtZahl === 0) {
document.getElementById("display_errors").innerHTML += "<p>Mindest-Bestellmenge 1!</p>";
ok = false;
}
// Verhindern des Formularabsendens, wenn ok false ist
if (!ok) {
event.preventDefault();
}
return ok;
});