Урок 23: Формы и валидация в JavaScript’e

Формы это «мост» между пользователем и вашим приложением. Через них мы получаем логины, пароли, email-адреса, отзывы и многое другое. Но если данные введены некорректно, это может привести к ошибкам, уязвимостям или даже поломке сервера. Поэтому валидация (проверка данных) критически важный этап разработки. В этом уроке мы научимся работать с HTML-формами, получать из них данные и реализовывать базовую валидацию.

Работа с HTML-формами

Формы в HTML создаются с помощью тега <form>, внутри которого размещаются элементы ввода: текстовые поля (<input>), выпадающие списки (<select>), чекбоксы (<input type="checkbox">) и кнопки (<button>). Давайте разберем структуру формы на примере:

<form id="myForm">
  <label for="name">Имя:</label>
  <input type="text" id="name" name="username" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="useremail" required>

  <button type="submit">Отправить</button>
</form>

Здесь:

• id="myForm" — уникальный идентификатор формы для доступа через JavaScript.
• Атрибуты name у полей (username, useremail) используются для получения данных после отправки.
• required — HTML-атрибут, который указывает, что поле обязательно для заполнения.

Получение данных из формы через JavaScript

Когда пользователь нажимает кнопку «Отправить», форма по умолчанию пытается перезагрузить страницу. Чтобы обработать данные без перезагрузки, мы можем перехватить событие submit и изменить его поведение.

Пример 1: Перехват отправки формы

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // Отменяем стандартную отправку

  // Получаем значения полей
  const name = form.elements.username.value;
  const email = form.elements.useremail.value;

  console.log('Имя:', name);
  console.log('Email:', email);
});

Как это работает:

• form.elements дает доступ ко всем элементам формы по их атрибуту name.
• event.preventDefault() останавливает перезагрузку страницы.

Простая валидация полей

Валидация может выполняться как на стороне клиента (с помощью JavaScript), так и на сервере. Клиентская проверка улучшает UX, но никогда не заменяет серверную, злоумышленники могут легко обойти JS-валидацию.

Вариант 1: Валидация с помощью HTML5

HTML5 предоставляет встроенные атрибуты для базовой проверки:

• required — поле обязательно.
• type="email" — проверка формата email.
• minlength и maxlength — минимальная и максимальная длина.
• pattern — регулярное выражение для проверки (например, для пароля).

Пример:

<input type="password" id="password" name="password" 
       minlength="8" pattern="^(?=.*[A-Za-z])(?=.*\d).+$"
       title="Пароль должен содержать буквы и цифры">

Вариант 2: Валидация через JavaScript

Для кастомной логики используйте JS. Например, проверим, совпадают ли пароли в двух полях:

form.addEventListener('submit', function(event) {
  event.preventDefault();

  const password = form.elements.password.value;
  const confirmPassword = form.elements.confirmPassword.value;

  if (password !== confirmPassword) {
    alert('Пароли не совпадают!');
    return; // Останавливаем отправку
  }

  // Если проверки пройдены, отправляем данные
  form.submit();
});

Практические задачи

Задача 1: Форма регистрации

Создайте форму с полями:

• Имя (обязательное, минимум 2 символа).
• Email (обязательное, корректный формат).
• Пароль (минимум 8 символов, буквы и цифры).
• Подтверждение пароля (должно совпадать с паролем).

Решение:

<form id="registerForm">
  <div>
    <label>Имя:</label>
    <input type="text" name="name" required minlength="2">
  </div>

  <div>
    <label>Email:</label>
    <input type="email" name="email" required>
  </div>

  <div>
    <label>Пароль:</label>
    <input type="password" name="password" required minlength="8" 
           pattern="^(?=.*[A-Za-z])(?=.*\d).+$">
  </div>

  <div>
    <label>Подтвердите пароль:</label>
    <input type="password" name="confirmPassword" required>
  </div>

  <button type="submit">Зарегистрироваться</button>
</form>

<script>
  const registerForm = document.getElementById('registerForm');

  registerForm.addEventListener('submit', function(event) {
    event.preventDefault();

    const password = registerForm.elements.password.value;
    const confirmPassword = registerForm.elements.confirmPassword.value;

    if (password !== confirmPassword) {
      alert('Ошибка: пароли не совпадают');
      return;
    }

    // Дополнительные проверки можно добавить здесь
    alert('Форма успешно отправлена!');
  });
</script>

Задача 2: Динамическая проверка email

Добавьте валидацию email в реальном времени. Если email некорректен, подсветите поле красным.

Решение:

const emailInput = document.getElementById('email');

emailInput.addEventListener('input', function() {
  const email = emailInput.value;
  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

  if (isValid) {
    emailInput.style.borderColor = 'green';
  } else {
    emailInput.style.borderColor = 'red';
  }
});

Советы по UX

• Показывайте ошибки сразу, а не после отправки формы.
• Используйте понятные сообщения: не «Некорректный ввод», а «Пароль должен содержать минимум 8 символов, включая цифры».
• Подсвечивайте проблемные поля, это помогает пользователю быстро найти ошибку.

Теперь вы умеете работать с формами и проверять данные.

Практикуйтесь! Попробуйте создать форму обратной связи с валидацией телефона и кастомными сообщениями об ошибках. Используйте setCustomValidity() для вывода подсказок:

const phoneInput = document.getElementById('phone');

phoneInput.addEventListener('input', function() {
  if (!/^\d{10}$/.test(phoneInput.value)) {
    phoneInput.setCustomValidity('Введите 10 цифр без пробелов');
  } else {
    phoneInput.setCustomValidity('');
  }
});

Полный курс по JavaScript по ссылке — все уроки по JavaScript для начинающих.