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 IDfeedback
to"Name is too short."
; - If it's 3 characters or more, set
feedback
to"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
input
event to listen for changes as the user types; - Use
event.target.value.length < 3
to check the length of the input value; - Use the
submit
event to listen for form submissions; - Use
event.preventDefault()
to stop the form from the default submitting behavior; - Use
nameInput.value.length < 3
to check the input value.
index.html
index.css
index.js
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Запитайте мені питання про цей предмет
Сумаризуйте цей розділ
Покажіть реальні приклади
Awesome!
Completion rate improved to 2.22
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 IDfeedback
to"Name is too short."
; - If it's 3 characters or more, set
feedback
to"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
input
event to listen for changes as the user types; - Use
event.target.value.length < 3
to check the length of the input value; - Use the
submit
event to listen for form submissions; - Use
event.preventDefault()
to stop the form from the default submitting behavior; - Use
nameInput.value.length < 3
to check the input value.
index.html
index.css
index.js
Дякуємо за ваш відгук!