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.

1. 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 ID feedback auf "Name ist zu kurz.";
   • Wenn es 3 Zeichen oder mehr sind, setzen Sie feedback auf "Name sieht gut aus!".
2. 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 ID form-message an;
   • Wenn es 3 Zeichen oder mehr sind, zeigen Sie "Formular erfolgreich übermittelt!" in form-message an.

• 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.