Udfordring: Implementering af Event-Lyttere
Opgave
Du opretter en formular, hvor brugere kan indsende deres oplysninger. Målet er at validere brugerinput, give feedback i realtid, mens de skriver, og forhindre formularindsendelse, hvis inputtet er ugyldigt.
- Feedback i realtid på input:
- Lyt efter ændringer, mens brugeren skriver;
- Inde i event handleren kontrolleres længden af inputværdien;
- Hvis den er mindre end 3 tegn, sættes indholdet af
<p>med IDfeedbacktil"Name is too short."; - Hvis den er 3 tegn eller mere, sættes
feedbacktil"Name looks good!".
- Forhindr standardformularindsendelse:
- Lyt efter formularindsendelser;
- Stop formularen fra at udføre standardindsendelsesadfærden;
- Kontroller inputværdien;
- Hvis den er mindre end 3 tegn, vises
"Please enter a longer name"i<p>med IDform-message; - Hvis den er 3 tegn eller mere, vises
"Form submitted successfully!"iform-message.
index.html
index.css
index.js
- Brug
input-begivenheden til at lytte efter ændringer, mens brugeren skriver; - Brug
event.target.value.length < 3til at kontrollere længden af inputværdien; - Brug
submit-begivenheden til at lytte efter formularindsendelser; - Brug
event.preventDefault()for at stoppe formularen fra standardindsendelsesadfærden; - Brug
nameInput.value.length < 3til at kontrollere inputværdien.
index.html
index.css
index.js
Var alt klart?
Tak for dine kommentarer!
Sektion 3. Kapitel 3
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Awesome!
Completion rate improved to 2.22
Udfordring: Implementering af Event-Lyttere
Stryg for at vise menuen
Opgave
Du opretter en formular, hvor brugere kan indsende deres oplysninger. Målet er at validere brugerinput, give feedback i realtid, mens de skriver, og forhindre formularindsendelse, hvis inputtet er ugyldigt.
- Feedback i realtid på input:
- Lyt efter ændringer, mens brugeren skriver;
- Inde i event handleren kontrolleres længden af inputværdien;
- Hvis den er mindre end 3 tegn, sættes indholdet af
<p>med IDfeedbacktil"Name is too short."; - Hvis den er 3 tegn eller mere, sættes
feedbacktil"Name looks good!".
- Forhindr standardformularindsendelse:
- Lyt efter formularindsendelser;
- Stop formularen fra at udføre standardindsendelsesadfærden;
- Kontroller inputværdien;
- Hvis den er mindre end 3 tegn, vises
"Please enter a longer name"i<p>med IDform-message; - Hvis den er 3 tegn eller mere, vises
"Form submitted successfully!"iform-message.
index.html
index.css
index.js
- Brug
input-begivenheden til at lytte efter ændringer, mens brugeren skriver; - Brug
event.target.value.length < 3til at kontrollere længden af inputværdien; - Brug
submit-begivenheden til at lytte efter formularindsendelser; - Brug
event.preventDefault()for at stoppe formularen fra standardindsendelsesadfærden; - Brug
nameInput.value.length < 3til at kontrollere inputværdien.
index.html
index.css
index.js
Var alt klart?
Tak for dine kommentarer!
Sektion 3. Kapitel 3