Einzelarbeit, Zeit: 60 Minuten
Einleitung
jQuery bietet praktische Tools, um interaktive Formulare zu erstellen.
Auf den folgenden Seiten erfahren Sie mehr:
Auftrag
Verwenden Sie nun zur Übung das erstellte Formular vom Auftrag 02 und versuchen Sie folgende Aufgaben zu lösen:
Sicherstellen, dass richtige Feldtypen verwendet wurden
Für E-Mail Adressen sollte <input type=“email“ /> verwendet werden, damit die Validierung nach gültigen E-Mail Adressen aktiviert ist.
Invalide Felder rot umranden
Falls der Benutzer versucht das Formular abzusenden, ohne obligatorische Felder mit den korrekten Werten zu versehen, so sollen die ungültigen Felder rot umrandet dargestellt werden.
Ungültige Felder entstehen:
- Wenn der Benutzer ein Feld mit dem required-Attribut leerlässt
- Wenn der Benutzer einen ungültigen Wert in ein Formularfeld einfügt (z.B. eine E-Mail Adresse ohne @-Symbol oder ähnliches)
Stellen Sie ebenfalls sicher, dass wenn ein Feld korrigiert wurde, dass die rote Umrandung sofort wieder verschwindet (und nicht erst beim Versuch erneut abzusenden).
Fehlermeldung ausgeben
Geben Sie eine Meldung oberhalb des Submit-Buttons aus, die besagt wie viele Felder noch invalid sind. Diese soll ebenfalls verschwinden, falls alle Felder korrigiert und nun gültig sind.