Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Challenge: Implement Event Listeners | Event Handling and User Interactions in JavaScript
Advanced JavaScript Mastery

bookChallenge: 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.

  1. 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 ID feedback to "Name is too short.";
    • If it's 3 characters or more, set feedback to "Name looks good!".
  2. 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 ID form-message;
    • If it's 3 characters or more, display "Form submitted successfully!" in form-message.
index.html

index.html

index.css

index.css

index.js

index.js

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

index.css

index.css

index.js

index.js

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 3. ChapterΒ 3

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

bookChallenge: 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.

  1. 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 ID feedback to "Name is too short.";
    • If it's 3 characters or more, set feedback to "Name looks good!".
  2. 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 ID form-message;
    • If it's 3 characters or more, display "Form submitted successfully!" in form-message.
index.html

index.html

index.css

index.css

index.js

index.js

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

index.css

index.css

index.js

index.js

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 3. ChapterΒ 3
some-alt