Challenge: Implement Event Listeners
Task
You're building a form where users can submit their details. Your goal is to validate user input, provide real-time feedback as they type, and prevent form submission if the input is invalid.
- Real-Time Input Feedback:
- Listen for changes as the user types;
- Inside the event handler, check the length of the input value;
- If it's less than 3 characters, set the content of the
<p>with IDfeedbackto"Name is too short."; - If it's 3 characters or more, set
feedbackto"Name looks good!".
- Prevent Default Form Submission:
- Listen for form submissions;
- Stop the form from the default submitting behavior;
- Check the input value;
- If it's less than 3 characters, display
"Please enter a longer name"in the<p>with IDform-message; - If it's 3 characters or more, display
"Form submitted successfully!"inform-message.
index.html
index.css
index.js
- Use the
inputevent to listen for changes as the user types; - Use
event.target.value.length < 3to check the length of the input value; - Use the
submitevent to listen for form submissions; - Use
event.preventDefault()to stop the form from the default submitting behavior; - Use
nameInput.value.length < 3to check the input value.
index.html
index.css
index.js
Everything was clear?
Thanks for your feedback!
SectionΒ 3. ChapterΒ 3
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Awesome!
Completion rate improved to 2.22
Challenge: Implement Event Listeners
Swipe to show menu
Task
You're building a form where users can submit their details. Your goal is to validate user input, provide real-time feedback as they type, and prevent form submission if the input is invalid.
- Real-Time Input Feedback:
- Listen for changes as the user types;
- Inside the event handler, check the length of the input value;
- If it's less than 3 characters, set the content of the
<p>with IDfeedbackto"Name is too short."; - If it's 3 characters or more, set
feedbackto"Name looks good!".
- Prevent Default Form Submission:
- Listen for form submissions;
- Stop the form from the default submitting behavior;
- Check the input value;
- If it's less than 3 characters, display
"Please enter a longer name"in the<p>with IDform-message; - If it's 3 characters or more, display
"Form submitted successfully!"inform-message.
index.html
index.css
index.js
- Use the
inputevent to listen for changes as the user types; - Use
event.target.value.length < 3to check the length of the input value; - Use the
submitevent to listen for form submissions; - Use
event.preventDefault()to stop the form from the default submitting behavior; - Use
nameInput.value.length < 3to check the input value.
index.html
index.css
index.js
Everything was clear?
Thanks for your feedback!
SectionΒ 3. ChapterΒ 3