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
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Can you show me how to set up the HTML form and input elements?
What would the JavaScript code look like for this validation?
Can you explain how to connect the feedback messages to the input and form events?
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
Thanks for your feedback!