Formulare prüfen

IT 12.6 – Webanwendungen · Einheit 6 · Café-App Schritt 6

Lernziele

Du kannst Eingaben mit HTML-Attributen prüfen lassen und die Grenzen dieser Prüfung erläutern.
Du kannst Eingaben beim Abschicken mit JavaScript prüfen (submit, preventDefault).
Du kannst verständliche und barrierefreie Fehlermeldungen anzeigen.
Du kannst beschreiben, was ein Formular beim Abschicken überträgt.
Du kannst begründen, warum der Server Eingaben zusätzlich prüfen muss.

Rückblick

1. Was liefert feld.value bei einem Zahlenfeld?

Text. Zum Rechnen mit Number(…) umwandeln. Ein leeres Feld liefert '', und Number('') ist 0.

2. Welche Prüfung im Browser lässt sich umgehen?

Jede. Den JavaScript-Code und das HTML kann jeder lesen und in den Entwicklerwerkzeugen ändern (Einheit 1).

3. Wie verbindet man ein label mit einem Eingabefeld?

Das for-Attribut des label enthält die id des Felds.

Bestellungen, die keiner versteht

Das Café-Team bekommt seltsame Bestellungen: ohne Namen, mit der Klasse „asdf“, mit 50 Brezeln oder ganz ohne Abholzeit. Das Formular soll solche Fehler vor dem Abschicken bemerken und freundlich sagen, was zu ändern ist.

Erkunden: Was prüft der Browser, was wird geschickt?

Bevor du weiterliest: Bearbeite die Erkundungen. Die Erklärungen weiter unten helfen dir erst danach.

Erkundung 1: Der Browser prüft mit mittel

Fülle das Formular auf verschiedene Arten falsch aus und drücke „Anmelden“. Beobachte die Meldungen.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Gib für jedes Feld an, welche Eingaben der Browser ablehnt.

b) Ändere <button> in <button type="button">. Beschreibe, was beim Klick jetzt passiert.

c) Setze in <form id="anmeldung"> das Attribut novalidate. Beschreibe die Wirkung.

d) Nenne Nachteile der Meldungen des Browsers.

Lösung

Erkundung 2: Was wird geschickt? mittel

Beim Abschicken zeigt dieses Formular an, welche Daten es übertragen würde, statt sie zu senden.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Schicke das Formular ab. Beschreibe den Aufbau der übertragenen Daten.

b) Ein Feld fehlt in den Daten. Finde heraus, welches, und erkläre warum.

c) Setze das Häkchen und schicke erneut ab. Vergleiche.

d) Beschreibe, was mit dem Leerzeichen in „Jana Marie“ und mit dem „ß“ in „Gießen“ passiert.

Lösung

Warum prüfen?

Vergleicht eure Ergebnisse. Formulare prüft man aus drei Gründen:

Benutzungsfreundlichkeit: Fehler sofort bemerken und verständlich erklären, statt eine Bestellung ins Leere zu schicken.
Datenqualität: Das Café-Team bekommt nur vollständige, sinnvolle Bestellungen.
Sicherheit: Unsinnige oder gefährliche Eingaben abwehren. Das leistet aber nur der Server zuverlässig.

Prüfen mit HTML

Attribut	prüft	Beispiel
`required`	Feld darf nicht leer sein	`<input required>`
`type="email"`, `"url"`, `"number"`, `"date"`	Form der Eingabe	`<input type="email">`
`min`, `max`, `step`	Bereich und Schrittweite bei Zahlen und Datum	`min="1" max="5"`
`minlength`, `maxlength`	Länge von Texten	`maxlength="30"`
`pattern`	ein Muster (regulärer Ausdruck)	`pattern="[0-9]{5}"`

Ungültige Felder lassen sich mit CSS hervorheben (input:invalid). Die Prüfung läuft nur, wenn das Formular über einen Knopf zum Abschicken (<button> oder <button type="submit">) abgeschickt wird, nicht bei type="button" und nicht mit novalidate.

Prüfen mit JavaScript

const formular = document.getElementById('bestellformular');

formular.addEventListener('submit', (event) => {
  event.preventDefault();               // nicht sofort abschicken
  const fehler = pruefe();              // eigene Prüfung
  if (fehler.length === 0) {
    formular.submit();                  // oder: Daten selbst verarbeiten
  }
});

event.preventDefault() verhindert die Standardreaktion, hier das Abschicken und Neuladen der Seite. In älterem Code steht die Verbindung im HTML: <form onsubmit="verarbeite(event)">.

Bausteine für Prüfungen:

Prüfung	Code
nicht leer	`text.trim() !== ''`
Länge	`text.length <= 30`
ganze Zahl im Bereich	`const n = Number(text); Number.isInteger(n) && n >= 1 && n <= 5`
enthält ein Zeichen	`text.includes('@')`
Muster	`/^[0-9]{5}$/.test(text)`

Ein regulärer Ausdruck beschreibt ein Muster für Texte. Er steht zwischen / und /. Die wichtigsten Zeichen:

Zeichen	Bedeutung	Beispiel	passt auf
`^` und `$`	Anfang und Ende des Texts	`/^ab$/`	nur „ab“
`[0-9]` oder `\d`	eine Ziffer	`/^\d\d$/`	„42“
`[12]`, `[A-Z]`	ein Zeichen aus der Klammer bzw. aus dem Bereich	`/^1[12]FO$/`	„11FO“, „12FO“
`?`	das Zeichen davor darf fehlen	`/^1[12]FO\d?$/`	„11FO“, „11FO2“
`{5}`	genau fünfmal	`/^\d{5}$/`	„35390“
`+`	einmal oder öfter	`/^\d+$/`	„7“, „123“
`i` hinter dem Muster	Groß- und Kleinschreibung egal	`/^1[12]FO$/i`	auch „11fo“

Ohne ^ und $ reicht es, wenn das Muster irgendwo im Text vorkommt. Beim HTML-Attribut pattern gilt dagegen immer der ganze Text.

Gute Fehlermeldungen

Beim Feld anzeigen, nicht nur oben oder in einem alert.
Sagen, was zu tun ist: „Bitte gib eine Anzahl von 1 bis 5 ein.“ statt „Ungültige Eingabe“.
Nicht nur Farbe: Text und Symbol, zum Beispiel ✗.
Für Vorlesehilfen die Meldung mit dem Feld verbinden: aria-describedby="fehler-anzahl" am Feld und aria-invalid="true", solange es fehlerhaft ist.
Nach dem Prüfen den Fokus auf das erste fehlerhafte Feld setzen (feld.focus()).
Eingaben nicht löschen, wenn ein Fehler auftritt.

Was übertragen wird

Beim Abschicken überträgt der Browser alle Felder mit name als Paare Name=Wert, getrennt durch &. Wohin und wie, legt das form-Element fest:

<form action="bestellung.php" method="post">

action: Adresse des Skripts, das die Daten verarbeitet (ohne Angabe: dieselbe Seite)
method: get (Daten werden an die Adresse angehängt) oder post (Daten im Inhalt der Anfrage)

Mehr dazu in Einheit 10.

Café-App: Schritt 6

Café-App, Schritt 6: Das Bestellformular prüfen schwer

Sorge dafür, dass in bestellen.html nur sinnvolle Bestellungen abgeschickt werden können.

Gib dem Formular die ID bestellformular und das Attribut novalidate. Die HTML-Attribute (required, min, max) bleiben trotzdem stehen.
Ergänze hinter jedem Feld bzw. Feldgruppe ein leeres Element für die Meldung, zum Beispiel <span class="fehler" id="fehler-name"></span>, und verbinde es mit aria-describedby.
Schreibe eine Funktion pruefeBestellung(daten). Sie bekommt ein Objekt mit name, klasse, anzahl, pause und liefert eine Liste von Fehlern { feld: 'name', text: '…' }. Regeln:
- Name: nicht leer, höchstens 30 Zeichen
- Klasse: 11FO oder 12FO, eventuell mit einer Ziffer oder einem Buchstaben dahinter (zum Beispiel 11FO2); Groß- und Kleinschreibung egal
- Anzahl: ganze Zahl von 1 bis 5
- Abholung: eine Pause gewählt
Beim Abschicken: Daten lesen, prüfen, Meldungen anzeigen (vorher alte entfernen), Fokus auf das erste fehlerhafte Feld.
Ist alles in Ordnung, erscheint statt des Abschickens eine Bestätigung, zum Beispiel: „Danke, Mia! 2 × Kakao = 3,00 €. Abholung: 1. große Pause.“ Das Senden an den Server folgt in Einheit 10.

Tipp 1

Die gewählte Pause findest du mit document.querySelector('input[name="pause"]:checked'). Ist keine gewählt, liefert das null.

Tipp 2

Trenne Prüfen und Anzeigen: pruefeBestellung greift nicht auf die Seite zu, sondern bekommt nur die Daten. So kannst du sie auch in der Konsole testen: pruefeBestellung({ name: '', klasse: '11FO', anzahl: '9', pause: null }).

Tipp 3

Das Produkt für die Bestätigung findest du mit der id aus der Auswahlliste: PRODUKTE.find((p) => p.id === Number(auswahl.value)).

Stand nach Schritt 6

Aufgaben

Aufgabe 1: Zwei Zeilen beschreiben leicht

Aus dem Ausleihformular der Stadtbücherei:

<label for="ausweis">Ausweisnummer:</label>
<input type="text" id="ausweis" name="ausweis" required pattern="B[0-9]{6}">

Beschreibe die beiden Zeilen.

Lösung

Aufgabe 2: Doppelt geprüft? mittel

Für die Anmeldung zum Sportfest gibt es dieses Formular:

<form>
  <input type="text" id="vorname" required>
  <input type="text" id="klasse" required>
  <button type="button" onclick="anmelden()">Anmelden</button>
</form>

function anmelden() {
  const vorname = document.getElementById('vorname').value;
  const klasse = document.getElementById('klasse').value;
  if (vorname && klasse) {
    senden(vorname, klasse);
  } else {
    alert('Bitte alle Felder ausfüllen.');
  }
}

Ein Mitschüler meint: „Die Prüfung if (vorname && klasse) ist überflüssig, es steht doch schon required im HTML.“

Nimm Stellung zu dieser Aussage.

Tipp 1

Welchen type hat der Knopf? Und was bedeutet if (vorname) bei einem leeren Text?

Lösung

Aufgabe 3: Ausweisnummer prüfen mittel

Implementiere pruefeAusweis(nummer). Sie liefert true, wenn die Nummer aus einem B und genau sechs Ziffern besteht, sonst false. Kleinbuchstaben (b123456) sollen erlaubt sein, Leerzeichen am Anfang und Ende auch.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung

Aufgabe 4: Anmeldung zur Theater-AG mittel

Ergänze das JavaScript so, dass beim Abschicken geprüft wird:

Name nicht leer → sonst Meldung in #fehler-name: Bitte gib deinen Namen ein.
Alter ganze Zahl von 14 bis 21 → sonst in #fehler-alter: Bitte gib ein Alter von 14 bis 21 ein.

Gibt es keinen Fehler, steht in #ergebnis der Text Angemeldet: mit dem Namen. Alte Meldungen verschwinden bei jedem Abschicken.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung

Aufgabe 5: Die letzten Plätze schwer

Für einen Erste-Hilfe-Kurs gibt es 12 Plätze. Auf der Anmeldeseite steht: „Noch 2 Plätze frei“. Der Entwickler hat so geprüft:

let freiePlaetze = 2;   // beim Laden der Seite vom Server übernommen

function anmelden() {
  if (freiePlaetze > 0) {
    freiePlaetze--;
    senden();            // schickt die Anmeldung an den Server
  } else {
    meldung.textContent = 'Leider ausgebucht.';
  }
}

Der Server speichert jede Anmeldung, die ankommt.

Beurteile diese Lösung. Gehe auf mindestens zwei Probleme ein und beschreibe, wie es richtig wäre.

Tipp 1

Was passiert, wenn fünf Personen die Seite gleichzeitig geöffnet haben? Und was, wenn jemand freiePlaetze = 100 in die Konsole tippt?

Lösung (Beispiel)

Zusatzaufgabe: Prüfen beim Tippen schwer Zusatz

Erweitere die Café-Bestellung: Die Klasse soll schon beim Verlassen des Felds (Ereignis blur) geprüft werden. Ist sie gültig, erscheint hinter dem Feld ein grünes ✓ mit dem Text „passt“, sonst die Fehlermeldung. Während man tippt, sollen keine Fehlermeldungen erscheinen, die man noch gar nicht verdient hat.

Begründe, warum man nicht schon bei jedem Tastendruck (input) eine Fehlermeldung zeigt.

Lösung (Beispiel)

Zusammenfassung

Prüfen im Browser ist ein Service, Prüfen auf dem Server ist Pflicht.
HTML prüft mit required, type, min/max, maxlength, pattern, aber nur beim Abschicken und umgehbar.
JavaScript prüft beim Ereignis submit. event.preventDefault() verhindert das sofortige Abschicken.
Bausteine: trim(), length, Number.isInteger, Bereich, reguläre Ausdrücke wie /^\d{5}$/.
Gute Meldungen stehen beim Feld, sagen, was zu tun ist, und funktionieren nicht nur über Farbe.
Übertragen werden alle Felder mit name als Name=Wert-Paare. Sonderzeichen werden kodiert.

Selbstcheck

Geh die Fragen ehrlich durch. Wenn du bei einer unsicher bist, lies den verlinkten Abschnitt noch einmal oder bearbeite die passende Aufgabe.

Kannst du mit HTML-Attributen prüfen und die Grenzen erläutern? → Erkundung 1, Prüfen mit HTML, Aufgabe 1, Aufgabe 2
Kannst du mit JavaScript prüfen? → Prüfen mit JavaScript, Aufgabe 3, Aufgabe 4
Kannst du gute Fehlermeldungen anzeigen? → Gute Fehlermeldungen, Café-App
Kannst du beschreiben, was übertragen wird? → Erkundung 2, Was übertragen wird
Kannst du begründen, warum der Server prüfen muss? → Warum prüfen?, Aufgabe 5

Wortspeicher

Begriff	Bedeutung in einfachen Worten
Validierung	Prüfen, ob Eingaben gültig sind
`required`	Pflichtfeld: darf nicht leer sein
`pattern`	Muster, dem die Eingabe entsprechen muss
`novalidate`	schaltet die Prüfung des Browsers für ein Formular ab
`submit`	Ereignis beim Abschicken eines Formulars
`preventDefault`	verhindert die Standardreaktion des Browsers
regulärer Ausdruck	Beschreibung eines Textmusters, zum Beispiel `/^\d{5}$/`
`trim`	entfernt Leerzeichen am Anfang und Ende
`aria-describedby` / `aria-invalid`	verbindet ein Feld mit seiner Meldung / kennzeichnet es als fehlerhaft
Name=Wert-Paar	Form, in der ein Formularfeld übertragen wird
URL-Kodierung	Sonderzeichen werden für die Übertragung umgeschrieben, z. B. Leerzeichen zu `+`

Quellen

Hessisches Kultusministerium: Kerncurriculum Fachoberschule, Fachrichtung Technik, Schwerpunkt Informationstechnik, Themenfeld 12.6 Webanwendungen, „Formulare: Übertragung und Validierung von Formularinhalten“ (Stand November 2022).
Formulare nach dem HTML-Standard (WHATWG). Hinweise zu Fehlermeldungen nach WCAG 2.2 (Erfolgskriterien 3.3.1 und 3.3.3). Freie Dokumentation: MDN Web Docs, developer.mozilla.org/de (Du verlässt jetzt Maternet).
Texte, Beispiele, Aufgaben und Code-Beispiele sind selbst erstellt.