Benutzername und E-Mail

Zeit für das nächste Projekt! Dieser Checkpoint wendet die Ereignisse und Formulare aus der vorigen Lektion an, zusammen mit allem, was du davor gelernt hast. Wie in den bisherigen Checkpoints sagen die Anweisungen, was die Seite tun soll, und wie du es schreibst, liegt bei dir.

Das Projekt. Du baust das Registrierungsformular einer Website: einen Benutzernamen, eine E-Mail-Adresse, ein Passwort, das zweimal eingegeben wird, und ein Alter. Das Formular prüft, was der Nutzer eingegeben hat, sagt neben jedem Feld, was nicht stimmt, und wenn alles richtig ist, verschwindet das Formular, und die Seite begrüßt den neuen Nutzer. In drei Übungen prüfst du zuerst Benutzernamen und E-Mail, dann die Passwörter und zuletzt das Alter, und dann begrüßt du den Nutzer.

Die Seite. Das Formular in index.html ist fertig. Jedes Feld hat eine id, und daneben steht ein leeres span für seine Fehlermeldung: benutzername-fehler neben benutzername und so weiter. Unter dem Formular steht der Absatz willkommen. Das E-Mail-Feld hat type="email", das daraus ein Feld für E-Mail-Adressen macht, das der Browser von selbst prüfen könnte. Das Attribut novalidate des Formulars schaltet das aus, denn hier übernimmt dein Skript die ganze Prüfung. Oben in script.js haben wir die Elemente schon gefunden und in Konstanten gespeichert.

Die Aufgabe. Wenn das Formular abgeschickt wird, darf die Seite nicht neu geladen werden. Prüfe den Benutzernamen und die E-Mail-Adresse, beide ohne die Leerzeichen am Anfang und am Ende:

• Wenn der Benutzername leer ist, zeige Gib einen Benutzernamen ein., und wenn er kürzer als 3 Zeichen ist, zeige Der Benutzername muss mindestens 3 Zeichen lang sein.
• Eine E-Mail-Adresse muss ein @ enthalten. Wenn sie keines enthält, zeige Gib eine gültige E-Mail-Adresse ein.

Zeige jede Meldung im Fehler-span ihres Feldes, und wenn ein Feld richtig ist, leere seine Meldung. Wenn beide Felder falsch sind, erscheinen beide Meldungen gleichzeitig.

Ein Tipp: In den nächsten Übungen kommen Prüfungen weiterer Felder dazu, und am Ende tut das Formular nur dann etwas, wenn jedes Feld richtig ist. Eine Variable, die sich merkt, ob alles richtig ist, wird dir dabei nützlich sein.