Форми та Валідація

Вітаю знову.

У попередній лекції ти познайомився з подіями.

Події допомагають JavaScript реагувати на кліки, введення тексту, форми та інші дії користувача.

Дуже корисно.

Дуже інтерактивно.

Дуже в стилі: “нарешті кнопка щось робить.”

Сьогодні ми продовжуємо одну з найважливіших частин веброзробки.

Форми.

Форми всюди.

Контактні форми.

Форми логіну.

Поля пошуку.

Підписки на newsletter.

Checkout-сторінки.

Маленькі коробки, в які користувачі вводять свою долю.

Але користувачі креативні.

Дуже креативні.

Якщо попросити email, хтось введе:

banana

Якщо попросити імʼя, хтось не введе нічого.

Якщо попросити пароль, хтось введе:

А потім здивується, що сайт каже “ні”.

Саме тому нам потрібна валідація.

Валідація означає перевірку даних користувача перед тим, як ми їх приймаємо.

JavaScript допомагає нам направляти користувача до того, як ми відправимо дані кудись далі.

Як ввічливий охоронець.

Але з крапками з комою.

Що Ти Вивчиш

У цій лекції ти вивчиш:

як працюють форми в HTML;
як вибирати input-и;
як читати значення input-ів;
як перевіряти порожні поля;
як перевіряти email;
як перевіряти довжину пароля;
як показувати повідомлення про помилки;
як показувати повідомлення про успіх;
як використовувати допоміжні функції;
як створити форму реєстрації.

Наприкінці цієї лекції ти зможеш створювати форми, які перевіряють дані користувача перед відправкою.

Це великий крок.

Бо форми без валідації — це як двері без ручки.

Технічно існують.

Емоційно заплутують.

Що Таке Валідація Форми?

Валідація форми означає перевірку, чи дані, введені користувачем, є прийнятними.

Приклад:

Імʼя не має бути порожнім.
Email має бути схожим на email.
Пароль має бути достатньо довгим.
Повідомлення має містити текст.

Валідація може відбуватися у двох місцях:

у браузері за допомогою JavaScript;
на сервері за допомогою backend-коду.

У цій лекції ми зосередимося на frontend-валідації з JavaScript.

Важливо:

Frontend-валідація покращує досвід користувача.

Але її недостатньо для безпеки.

Реальні застосунки мають перевіряти дані також на backend.

Ніколи не довіряй тільки браузеру.

Браузер живе на компʼютері користувача.

А користувачі мають кнопки.

Небезпечні кнопки.

Створи Проєкт

Створи папку для цієї лекції:

mkdir javascript-lesson9
cd javascript-lesson9
touch index.html
touch script.js

Твій проєкт має виглядати так:

javascript-lesson9/
  index.html
  script.js

Відкрий папку в редакторі.

Сьогодні ми створимо форму, перевіримо її та покажемо повідомлення.

Маленький проєкт.

Велика лекція.

Форма готова.

Хаос чекає.

Напиши HTML

Відкрий index.html і додай:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Форми та Валідація</title>
</head>
<body>
  <h1>Форми та Валідація</h1>

  <form id="signupForm">
    <label for="nameInput">Імʼя</label>
    <input id="nameInput" type="text" placeholder="Твоє імʼя">

    <label for="emailInput">Email</label>
    <input id="emailInput" type="email" placeholder="you@example.com">

    <label for="passwordInput">Пароль</label>
    <input id="passwordInput" type="password" placeholder="Мінімум 6 символів">

    <button type="submit">Зареєструватися</button>
  </form>

  <p id="message">Заповни форму й відправ її.</p>

  <script src="script.js"></script>
</body>
</html>

Це дає нам:

форму;
input для імені;
input для email;
input для пароля;
кнопку submit;
місце для повідомлення.

Просто.

Чисто.

Готово ввічливо оцінювати дані користувача.

Вибери Форму та Input-и

Відкрий script.js і додай:

const signupForm = document.getElementById("signupForm");
const nameInput = document.getElementById("nameInput");
const emailInput = document.getElementById("emailInput");
const passwordInput = document.getElementById("passwordInput");
const messageElement = document.getElementById("message");

Тепер JavaScript має доступ до форми та input-ів.

Ці змінні представляють HTML-елементи.

Але памʼятай:

Елемент input — це не те саме, що значення всередині нього.

Це:

nameInput

це елемент input.

А це:

nameInput.value

це те, що користувач ввів.

Коробка.

Вміст.

Різні речі.

Як коробка від піци й піца.

Не їж коробку.

Обробка Submit Форми

Тепер додамо event listener для submit.

function handleSignup(event) {
  event.preventDefault();

  console.log("Форму відправлено!");
}

signupForm.addEventListener("submit", handleSignup);

Онови браузер.

Відправ форму.

Сторінка не має перезавантажитися.

У консолі має зʼявитися:

Форму відправлено!

Чому сторінка не перезавантажується?

Бо ми використали:

event.preventDefault();

За замовчуванням форми перезавантажують сторінку після відправки.

Але ми хочемо, щоб JavaScript обробляв форму.

Тому зупиняємо стандартну поведінку.

Без preventDefault сторінка перезавантажується, повідомлення зникає, а твоя впевненість іде гуляти.

Читання Значень Input-ів

Тепер прочитаємо значення.

Онови handleSignup:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value;
  const email = emailInput.value;
  const password = passwordInput.value;

  console.log(name);
  console.log(email);
  console.log(password);
}

Введи щось у форму й відправ її.

Ти маєш побачити значення в консолі.

Це базовий шаблон:

const value = input.value;

Дуже поширено.

Дуже важливо.

Дуже легко забути, коли мозок одночасно дебажить пʼять речей.

Валідація Порожніх Полів

Перше правило валідації просте.

Поля не мають бути порожніми.

Онови handleSignup:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value;
  const email = emailInput.value;
  const password = passwordInput.value;

  if (name === "" || email === "" || password === "") {
    messageElement.textContent = "Заповни всі поля.";
    return;
  }

  messageElement.textContent = "Форма виглядає добре!";
}

Тепер відправ порожню форму.

Ти маєш побачити:

Заповни всі поля.

return важливий.

Він зупиняє функцію.

Якщо форма неправильна, ми показуємо помилку й зупиняємося.

Не потрібно йти далі.

Як побачити дим на кухні й вирішити, що зараз не найкращий момент пекти торт.

Мудро.

Видалення Зайвих Пробілів Через trim

Є одна проблема.

Користувач може ввести тільки пробіли:

Технічно це не порожній рядок.

Але це також не справжнє імʼя.

Тому використовуємо .trim().

Приклад:

const name = nameInput.value.trim();

.trim() видаляє пробіли на початку й у кінці рядка.

Онови код:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();

  if (name === "" || email === "" || password === "") {
    messageElement.textContent = "Заповни всі поля.";
    return;
  }

  messageElement.textContent = "Форма виглядає добре!";
}

Тепер самі пробіли не пройдуть валідацію.

Добре.

Користувачі креативні.

Але ми вчимося.

Валідація Email

Проста перевірка email може використовувати .includes().

Приклад:

if (!email.includes("@")) {
  messageElement.textContent = "Введи правильний email.";
  return;
}

Це не ідеальна валідація email.

Валідація email може стати несподівано складною.

Дуже складною.

Як відкрити шухляду й знайти всередині ще одну шухляду.

Для початківців перевірки на @ достатньо, щоб зрозуміти ідею.

Онови функцію:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();

  if (name === "" || email === "" || password === "") {
    messageElement.textContent = "Заповни всі поля.";
    return;
  }

  if (!email.includes("@")) {
    messageElement.textContent = "Введи правильний email.";
    return;
  }

  messageElement.textContent = "Форма виглядає добре!";
}

Тепер якщо користувач введе:

banana

JavaScript скаже ні.

Ввічливо.

Але твердо.

Валідація Довжини Пароля

Тепер перевіримо довжину пароля.

Приклад:

if (password.length < 6) {
  messageElement.textContent = "Пароль має містити мінімум 6 символів.";
  return;
}

Додамо це у функцію:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();

  if (name === "" || email === "" || password === "") {
    messageElement.textContent = "Заповни всі поля.";
    return;
  }

  if (!email.includes("@")) {
    messageElement.textContent = "Введи правильний email.";
    return;
  }

  if (password.length < 6) {
    messageElement.textContent = "Пароль має містити мінімум 6 символів.";
    return;
  }

  messageElement.textContent = "Форма виглядає добре!";
}

Тепер форма перевіряє:

порожні поля;
формат email;
довжину пароля.

Це вже корисно.

Не ідеально.

Але корисно.

Як стілець з чотирма ніжками.

Добрий початок.

Додай Кращі Стилі

Тепер зробимо форму красивішою.

Онови index.html:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Форми та Валідація</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    h1 {
      font-size: 42px;
    }

    label {
      display: block;
      margin-top: 16px;
      font-weight: 700;
    }

    input {
      width: 100%;
      margin-top: 8px;
      padding: 12px;
      border: 2px solid #d1d5db;
      border-radius: 12px;
      font-size: 18px;
      box-sizing: border-box;
    }

    button {
      margin-top: 18px;
      background-color: #2563eb;
      color: white;
      border: none;
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      background-color: #1d4ed8;
    }

    .message {
      margin-top: 20px;
      padding: 16px;
      border-radius: 14px;
      background-color: #eff6ff;
      border: 2px solid #bfdbfe;
    }

    .error {
      background-color: #fef2f2;
      border-color: #fecaca;
      color: #991b1b;
    }

    .success {
      background-color: #ecfdf5;
      border-color: #bbf7d0;
      color: #166534;
    }
  </style>
</head>
<body>
  <h1>Форми та Валідація</h1>

  <div class="card">
    <form id="signupForm">
      <label for="nameInput">Імʼя</label>
      <input id="nameInput" type="text" placeholder="Твоє імʼя">

      <label for="emailInput">Email</label>
      <input id="emailInput" type="email" placeholder="you@example.com">

      <label for="passwordInput">Пароль</label>
      <input id="passwordInput" type="password" placeholder="Мінімум 6 символів">

      <button type="submit">Зареєструватися</button>
    </form>

    <p id="message" class="message">Заповни форму й відправ її.</p>
  </div>

  <script src="script.js"></script>
</body>
</html>

Тепер форма виглядає так, ніби вона належить сайту.

А не документу з 1998 року.

Прогрес.

Створи Допоміжні Функції

Наша валідація працює.

Але ми часто повторюємо цей рядок:

messageElement.textContent = "...";

Створімо допоміжну функцію.

Онови script.js:

const signupForm = document.getElementById("signupForm");
const nameInput = document.getElementById("nameInput");
const emailInput = document.getElementById("emailInput");
const passwordInput = document.getElementById("passwordInput");
const messageElement = document.getElementById("message");

function showMessage(text, type) {
  messageElement.textContent = text;
  messageElement.className = `message ${type}`;
}

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();

  if (name === "" || email === "" || password === "") {
    showMessage("Заповни всі поля.", "error");
    return;
  }

  if (!email.includes("@")) {
    showMessage("Введи правильний email.", "error");
    return;
  }

  if (password.length < 6) {
    showMessage("Пароль має містити мінімум 6 символів.", "error");
    return;
  }

  showMessage(`Вітаю, ${name}! Дані акаунта виглядають правильними.`, "success");
}

signupForm.addEventListener("submit", handleSignup);

Набагато чистіше.

Тепер це:

showMessage("Заповни всі поля.", "error");

оновлює і текст, і стиль.

Допоміжні функції допомагають уникати повторення.

А повторення в коді — це як шкарпетки, що зникають у пральній машині.

Спочатку смішно.

Потім це стає життєвою проблемою.

Очисти Input-и Після Успіху

Якщо форма правильна, ми можемо очистити input-и.

Додай це після повідомлення про успіх:

nameInput.value = "";
emailInput.value = "";
passwordInput.value = "";

Повна фінальна частина:

showMessage(`Вітаю, ${name}! Дані акаунта виглядають правильними.`, "success");

nameInput.value = "";
emailInput.value = "";
passwordInput.value = "";

Тепер після успішної відправки форма знову стає порожньою.

Це поширений шаблон.

Відправити.

Показати повідомлення.

Очистити поля.

Цивілізована поведінка.

Дуже рідкісна в погано зроблених формах.

Повний JavaScript Код

Ось повний script.js:

const signupForm = document.getElementById("signupForm");
const nameInput = document.getElementById("nameInput");
const emailInput = document.getElementById("emailInput");
const passwordInput = document.getElementById("passwordInput");
const messageElement = document.getElementById("message");

function showMessage(text, type) {
  messageElement.textContent = text;
  messageElement.className = `message ${type}`;
}

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();

  if (name === "" || email === "" || password === "") {
    showMessage("Заповни всі поля.", "error");
    return;
  }

  if (!email.includes("@")) {
    showMessage("Введи правильний email.", "error");
    return;
  }

  if (password.length < 6) {
    showMessage("Пароль має містити мінімум 6 символів.", "error");
    return;
  }

  showMessage(`Вітаю, ${name}! Дані акаунта виглядають правильними.`, "success");

  nameInput.value = "";
  emailInput.value = "";
  passwordInput.value = "";
}

signupForm.addEventListener("submit", handleSignup);

Це вже справжня інтерактивна форма.

Вона читає input-и.

Перевіряє дані.

Показує повідомлення.

Очищає поля.

Ще без backend.

Ще без бази даних.

Ще без серверних драконів.

Але це справжня frontend-поведінка.

Типові Помилки

Забути preventDefault

Неправильно:

function handleSignup(event) {
  const name = nameInput.value;
}

Правильно:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value;
}

Без preventDefault сторінка може перезавантажитися.

Тоді JavaScript-повідомлення зникає.

Потім ти звинувачуєш компʼютер.

Потім згадуєш пропущений рядок.

Забути .value

Неправильно:

const email = emailInput;

Правильно:

const email = emailInput.value;

Елемент input — це коробка.

Значення — це те, що користувач написав.

Не перевіряй коробку.

Перевіряй вміст.

Знову правило піци.

Забути return

Неправильно:

if (password.length < 6) {
  showMessage("Пароль занадто короткий.", "error");
}

showMessage("Успіх!", "success");

Це покаже помилку, а потім успіх.

Заплутано.

Правильно:

if (password.length < 6) {
  showMessage("Пароль занадто короткий.", "error");
  return;
}

showMessage("Успіх!", "success");

return зупиняє функцію.

Дуже корисно.

Дуже недооцінено.

Як сон.

Перевіряти Email Надто Просто

Це просто:

email.includes("@")

Добре для навчання.

Але справжня валідація email складніша.

Поки що мета — зрозуміти логіку валідації.

А не стати міжнародним міністром email-форматів.

Практика

Створи контактну форму з:

імʼям;
email;
повідомленням.

Правила:

імʼя не має бути порожнім;
email має містити @;
повідомлення має мати мінімум 10 символів.

Показуй повідомлення про помилки, коли щось не так.

Показуй повідомлення про успіх, коли все правильно.

Приклад повідомлення про успіх:

Дякуємо! Твоє повідомлення готове до відправки.

Памʼятай:

Це не відправляє повідомлення насправді.

Це тільки перевіряє форму.

Все одно корисно.

Все одно важливо.

Все одно frontend.

Мінічелендж

Створи форму підтвердження пароля.

Форма має мати:

input password;
input confirm password;
кнопку submit;
місце для повідомлення.

Правила:

пароль не має бути порожнім;
пароль має містити мінімум 6 символів;
підтвердження пароля має збігатися з паролем.

Якщо все правильно, покажи:

Пароль підтверджено.

Якщо ні — покажи корисну помилку.

Це дуже часто зустрічається на реальних сайтах.

Користувачі часто вводять пароль двічі.

Бо, очевидно, одного поля для пароля було недостатньо емоційного тиску.

Підсумок

Сьогодні ти вивчив:

форми збирають дані користувача;
JavaScript може читати значення input-ів через .value;
відправку форми можна обробляти через submit;
preventDefault зупиняє перезавантаження сторінки;
валідація перевіряє, чи дані прийнятні;
.trim() видаляє зайві пробіли;
порожні поля можна перевіряти через === "";
email можна перевіряти простими умовами;
довжину пароля можна перевіряти через .length;
допоміжні функції зменшують повторення;
повідомлення про помилки й успіх покращують досвід користувача.

Це великий крок.

Форми всюди.

Валідація всюди.

Користувачі всюди вводять дивні речі.

JavaScript допомагає нам навести порядок.

Не ідеальний порядок.

Але достатній, щоб вижити.

Наступна Лекція

У наступній лекції ми познайомимося з local storage.

Local storage дозволяє JavaScript зберігати дані в браузері.

Це означає, що сторінка може памʼятати речі навіть після оновлення.

Завдання.

Налаштування.

Імена.

Маленькі шматочки даних.

Нарешті JavaScript отримує маленьку памʼять.

Небезпечно.

Але корисно.