Aufgabe 19 - Anmeldeformular mit Validierung

Aufgabe 19 - Anmeldeformular mit Validierung

Worum geht es?

Ein Formular für die Anmeldung zu einem Schulevent, mit freundlicher und präziser Validierung statt kryptischer Fehler (siehe Kapitel GUI I - Formulare und Interaktion).

In dieser Übung üben Sie:

• Auslesen: Werte aus verschiedenen Formularelementen holen.
• Validieren: Eingaben prüfen, bevor sie verarbeitet werden.
• Rückmelden: Fehler direkt beim betroffenen Feld anzeigen.

Benötigte Unterlagen

• VS Code, Browser; Projekt mit index.html, style.css, script.js.

Arbeitsaufträge

Teil A - Formular bauen

Das Formular “Anmeldung Sommerfest” enthält: Name (Text), Klasse (Auswahlliste 1A-5B), Alter (Zahl), E-Mail (Text), Workshop (Radio: Robotik / Musik / Sport) und eine Checkbox “Ich helfe beim Aufbau”. Gestalten Sie es übersichtlich (Labels!).

Teil B - Validierung

Beim Absenden (submit + preventDefault) wird geprüft:

1. Name: mindestens 2 Zeichen,
2. Alter: Zahl zwischen 10 und 20,
3. E-Mail: enthält @ und danach einen Punkt (einfache Prüfung genügt; echte E-Mail-Validierung kommt mit regulären Ausdrücken in der 3. Klasse),
4. Workshop: einer muss gewählt sein.

Anforderungen an die Rückmeldung:

• Fehlertexte erscheinen unter dem jeweiligen Feld (nicht als alert), das Feld bekommt einen roten Rahmen (CSS-Klasse).
• Bei jeder neuen Prüfung werden alte Fehler zuerst gelöscht.
• Es werden alle Fehler auf einmal angezeigt, nicht nur der erste.

Teil C - Erfolgsfall

1. Bei gültiger Eingabe: Formular ausblenden und eine Zusammenfassung anzeigen (“Danke, Alex! Du bist für Robotik angemeldet. …”).
2. Die Anmeldung wird als Objekt erzeugt und mit console.log ausgegeben. Die Struktur entwerfen Sie selbst.
3. Zusatz: Mehrere Anmeldungen in einem Array sammeln und eine laufende Teilnehmerliste unter dem Formular anzeigen.

Abgabe

Projektordner. Testen Sie vor der Abgabe gezielt: alles leer absenden, nur ein Feld falsch, alles korrekt.