Herausforderung: Ereignisse und Event-Listener
Aufgabe
Sie erstellen ein Formular, in dem Benutzer ihre Daten eingeben können. Ihr Ziel ist es, die Benutzereingaben zu validieren, Echtzeit-Feedback während der Eingabe bereitzustellen und die Formularübermittlung zu verhindern, wenn die Eingabe ungültig ist.
- Echtzeit-Feedback zur Eingabe:
- Hören Sie auf Änderungen, während der Benutzer tippt;
- Überprüfen Sie im Ereignishandler die Länge des Eingabewerts;
- Wenn es weniger als 3 Zeichen sind, setzen Sie den Inhalt des
<p>
mit der IDfeedback
auf"Name ist zu kurz."
; - Wenn es 3 Zeichen oder mehr sind, setzen Sie
feedback
auf"Name sieht gut aus!"
.
- Standardmäßige Formularübermittlung verhindern:
- Hören Sie auf Formularübermittlungen;
- Stoppen Sie das Formular vom standardmäßigen Übermittlungsverhalten;
- Überprüfen Sie den Eingabewert;
- Wenn es weniger als 3 Zeichen sind, zeigen Sie
"Bitte geben Sie einen längeren Namen ein"
im<p>
mit der IDform-message
an; - Wenn es 3 Zeichen oder mehr sind, zeigen Sie
"Formular erfolgreich übermittelt!"
inform-message
an.
index.html
index.css
index.js
- Verwenden Sie das
input
-Ereignis, um Änderungen zu überwachen, während der Benutzer tippt; - Verwenden Sie
event.target.value.length < 3
, um die Länge des Eingabewerts zu überprüfen; - Verwenden Sie das
submit
-Ereignis, um Formularübermittlungen zu überwachen; - Verwenden Sie
event.preventDefault()
, um das Standardverhalten der Formularübermittlung zu stoppen; - Verwenden Sie
nameInput.value.length < 3
, um den Eingabewert zu überprüfen.
index.html
index.css
index.js
War alles klar?
Danke für Ihr Feedback!
Abschnitt 3. Kapitel 3