Валидация форм на стороне клиента: required, pattern, проверка через JavaScript

Почему валидация форм — это важно? 🔍

Представьте: пользователь заполняет регистрацию, но забывает ввести email. Без валидации форма отправит пустые данные, а сервер вернёт ошибку. Раздражает, правда? Клиентская валидация решает эту проблему мгновенно, подсказывая ошибки до отправки!

Атрибуты `required` и `pattern` — базовая защита

HTML5 предлагает встроенные способы проверки данных.

`required` — поле обязательно к заполнению

<input type="text" name="username" required placeholder="Введите имя">

Если поле пустое, браузер покажет сообщение: "Заполните это поле".

`pattern` — проверка по регулярному выражению

Хотите, чтобы пароль содержал минимум 6 символов (буквы и цифры)?

<input type="password" name="password" pattern="[A-Za-z0-9]{6,}" 
       title="Пароль: 6+ символов (латиница и цифры)" required>

[A-Za-z0-9] — разрешённые символы.
{6,} — минимум 6 символов.
title — подсказка при ошибке.

Пример для email:

<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>

Кастомизация сообщений об ошибках 🎨

Стандартные уведомления браузера выглядят скучно. Меняем их через JavaScript!

<form id="myForm">
  <input type="text" id="username" required>
  <button type="submit">Отправить</button>
</form>

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

  form.addEventListener('submit', (event) => {
    const input = document.getElementById('username');

    if (!input.value.trim()) {
      event.preventDefault(); // Отменяем отправку
      input.setCustomValidity('Имя пользователя не может быть пустым!');
      input.reportValidity(); // Показываем сообщение
    } else {
      input.setCustomValidity(''); // Сбрасываем ошибку
    }
  });
</script>

Расширенная проверка через JavaScript

Иногда встроенных атрибутов недостаточно. Например, нужно сравнить два пароля:

<form id="signupForm">
  <input type="password" id="password" placeholder="Пароль" required>
  <input type="password" id="confirmPassword" placeholder="Повторите пароль" required>
  <button type="submit">Зарегистрироваться</button>
</form>

<script>
  document.getElementById('signupForm').addEventListener('submit', (e) => {
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirmPassword').value;

    if (password !== confirmPassword) {
      e.preventDefault();
      alert('Пароли не совпадают!');
    }
  });
</script>

Плюсы подхода:
- Гибкость: любые условия проверки.
- Визуальный контроль: можно показывать ошибки в <div> под полем.

Валидация "на лету" (без submit)

Проверяем данные сразу при вводе:

<input type="text" id="liveCheck" placeholder="Введите число от 1 до 10">

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

  liveInput.addEventListener('input', () => {
    const value = parseInt(liveInput.value);

    if (value < 1 || value > 10) {
      liveInput.style.borderColor = 'red';
    } else {
      liveInput.style.borderColor = 'green';
    }
  });
</script>

Итоги: когда что использовать?

Способ	Когда применять?	Пример использования
`required`	Обязательные поля	Логин, email, пароль
`pattern`	Специфичные форматы	Телефон, почта, индекс
JavaScript-валидация	Сложная логика	Сравнение паролей, AJAX-проверка

Важно: клиентская проверка — это удобство, но не безопасность! Всегда дублируйте её на сервере.

💡 Просто — не значит примитивно. Хорошая форма экономит время пользователя и снижает нагрузку на сервер!

Валидация форм на стороне клиента: required, pattern, проверка через JavaScript

Почему валидация форм — это важно? 🔍

Атрибуты required и pattern — базовая защита

required — поле обязательно к заполнению

pattern — проверка по регулярному выражению