Вивчайте Завдання: Реалізація Обробників Подій | Обробка Подій та Взаємодія з Користувачем у JavaScript

Завдання

Ви створюєте форму, у якій користувачі можуть надсилати свої дані. Ваша мета — перевіряти введені дані, надавати зворотний зв'язок у реальному часі під час введення та запобігати відправленню форми, якщо дані некоректні.

Зворотний зв'язок у реальному часі:
- Слухати зміни під час введення користувачем;
- Усередині обробника події перевіряти довжину значення поля вводу;
- Якщо менше 3 символів, встановити вміст <p> з ID feedback як "Name is too short.";
- Якщо 3 символи або більше, встановити feedback як "Name looks good!".
Запобігання стандартному відправленню форми:
- Слухати події відправлення форми;
- Зупиняти стандартну поведінку відправлення форми;
- Перевіряти значення поля вводу;
- Якщо менше 3 символів, відобразити "Please enter a longer name" у <p> з ID form-message;
- Якщо 3 символи або більше, відобразити "Form submitted successfully!" у form-message.

index.html

index.css

index.js

Використовуйте подію input для відстеження змін під час введення користувачем;
Використовуйте event.target.value.length < 3 для перевірки довжини значення поля вводу;
Використовуйте подію submit для відстеження відправлення форми;
Використовуйте event.preventDefault() для зупинки стандартної поведінки відправлення форми;
Використовуйте nameInput.value.length < 3 для перевірки значення поля вводу.

index.html

index.css

index.js

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 3. Розділ 3

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

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

Свайпніть щоб показати меню

Завдання

Зворотний зв'язок у реальному часі:
- Слухати зміни під час введення користувачем;
- Усередині обробника події перевіряти довжину значення поля вводу;
- Якщо менше 3 символів, встановити вміст <p> з ID feedback як "Name is too short.";
- Якщо 3 символи або більше, встановити feedback як "Name looks good!".
Запобігання стандартному відправленню форми:
- Слухати події відправлення форми;
- Зупиняти стандартну поведінку відправлення форми;
- Перевіряти значення поля вводу;
- Якщо менше 3 символів, відобразити "Please enter a longer name" у <p> з ID form-message;
- Якщо 3 символи або більше, відобразити "Form submitted successfully!" у form-message.

index.html

index.css

index.js

Використовуйте подію input для відстеження змін під час введення користувачем;
Використовуйте event.target.value.length < 3 для перевірки довжини значення поля вводу;
Використовуйте подію submit для відстеження відправлення форми;
Використовуйте event.preventDefault() для зупинки стандартної поведінки відправлення форми;
Використовуйте nameInput.value.length < 3 для перевірки значення поля вводу.

index.html

index.css

index.js

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 3. Розділ 3