Вивчайте Завдання: Реалізація Обробників Подій | Обробка Подій та Взаємодія з Користувачем у 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

Запитати АІ

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

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