Формы и Валидация

С возвращением.

В предыдущем уроке ты познакомился с событиями.

События помогают 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="ru">
<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="ru">
<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 получает маленькую память.

Опасно.

Но полезно.