Завдання: Реалізація Обробників Подій
Завдання
Ви створюєте форму, у якій користувачі можуть надсилати свої дані. Ваша мета — перевіряти введені дані, надавати зворотний зв'язок у реальному часі під час введення та запобігати відправленню форми, якщо дані некоректні.
- Зворотний зв'язок у реальному часі:
- Слухати зміни під час введення користувачем;
- Усередині обробника події перевіряти довжину значення поля вводу;
- Якщо менше 3 символів, встановити вміст
<p>
з IDfeedback
як"Name is too short."
; - Якщо 3 символи або більше, встановити
feedback
як"Name looks good!"
.
- Запобігання стандартному відправленню форми:
- Слухати події відправлення форми;
- Зупиняти стандартну поведінку відправлення форми;
- Перевіряти значення поля вводу;
- Якщо менше 3 символів, відобразити
"Please enter a longer name"
у<p>
з IDform-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>
з IDfeedback
як"Name is too short."
; - Якщо 3 символи або більше, встановити
feedback
як"Name looks good!"
.
- Запобігання стандартному відправленню форми:
- Слухати події відправлення форми;
- Зупиняти стандартну поведінку відправлення форми;
- Перевіряти значення поля вводу;
- Якщо менше 3 символів, відобразити
"Please enter a longer name"
у<p>
з IDform-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