Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Завдання: Реалізація Обробників Подій | Обробка Подій та Взаємодія з Користувачем у JavaScript
Просунуте Володіння JavaScript

bookЗавдання: Реалізація Обробників Подій

Завдання

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

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

index.html

index.css

index.css

index.js

index.js

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

index.html

index.css

index.css

index.js

index.js

copy

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

Як ми можемо покращити це?

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

Awesome!

Completion rate improved to 2.22

bookЗавдання: Реалізація Обробників Подій

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

Завдання

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

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

index.html

index.css

index.css

index.js

index.js

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

index.html

index.css

index.css

index.js

index.js

copy

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

Як ми можемо покращити це?

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

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