Валидация HTML‑форм на стороне клиента с помощью JavaScript

TL;DR

Клиентская валидация форм улучшает UX и снижает нагрузку на сервер, но не заменяет валидацию на сервере. В статье объяснено, как читать DOM, как проверять email, пароли, radio, select и checkbox с корректными примерами кода и практическими чек-листами для команд.

Зачем валидация на клиенте

JavaScript — один из самых популярных языков для фронтенда и «язык веба». HTML‑формы — основной способ ввода данных пользователями. Валидация на клиенте: ускоряет обратную связь, снижает количество ошибочных запросов на сервер и повышает удобство. Однако клиентская валидация — это только первый уровень защиты; сервер должен повторно проверять входные данные для безопасности.

Понимание DOM

DOM (Document Object Model) — это стандартный API, через который JavaScript получает и изменяет элементы страницы. Чтобы реагировать на события формы и читать значения, нужно уметь получать узлы DOM и подписываться на события.

Узнать больше: Скрытый герой сайтов — что такое DOM

Простой пример изменения содержимого страницы через DOM:

Важно: document.getElementById возвращает null, если элемент не найден — проверяйте результат перед использованием.

Валидация форм с JavaScript

Разные типы полей требуют разной логики: текстовые поля, email, пароль, radio/checkbox и select. Ниже — практические примеры с исправленными и безопасными подходами.

1. Email

Email часто собирают для аутентификации или рассылок. Регулярные выражения помогают быстро отлавливать очевидные ошибки, но не гарантируют существование почтового ящика.

HTML:

JavaScript:

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
if (!emailInput) throw new Error('Элемент email не найден');
if (!emailRegex.test(emailInput.value.trim())) {
  alert('Неверный формат email.');
}

Совет: используйте .trim() и не полагайтесь только на regex — отправьте подтверждение на почту для проверки адреса.

2. Пароль

Требования к паролю зависят от продукта. Пример: минимум 6 символов и совпадение полей “пароль” и “подтвердите пароль”.

HTML:

JavaScript:

const pwdElem = document.getElementById('password');
const confirmElem = document.getElementById('confirm-password');
if (!pwdElem || !confirmElem) throw new Error('Элемент пароля не найден');
const password = pwdElem.value;
const confirmPassword = confirmElem.value;
if (password.length < 6) {
  alert('Пароль должен быть не короче 6 символов.');
}
if (password !== confirmPassword) {
  alert('Пароли не совпадают.');
}

Рекомендация: отображайте подсказки о силе пароля в реальном времени и предлагайте парольную политику, совместимую с UX.

3. Radio

Radio‑кнопки позволяют выбрать только один вариант. Проверяем, что выбран хотя бы один вариант.

HTML:

Male


Female


Others

JavaScript:

const radios = document.getElementsByName('gender');
let validForm = false;
for (let i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    validForm = true;
    break;
  }
}
if (!validForm) alert('Необходимо выбрать один из вариантов.');

Примечание: getElementsByName возвращает живой NodeList; для удобства используйте Array.from(radios).

4. Select

Select‑список: назначьте начальной опции пустое значение, чтобы служить маркером “не выбрано”.

HTML:

  Select One
  Mr
  Mrs
  Ms

JavaScript:

const title = document.getElementById('title');
if (!title) throw new Error('Select элемент не найден');
if (title.value === '') {
  alert('Пожалуйста, выберите обращение.');
}

Обратите внимание: в оригинале была опечатка с оператором присваивания (=) вместо сравнения (===). Это исправлено.

5. Checkbox

Checkbox часто используют для соглашения с условиями. Проверяем свойство checked.

HTML:

I agree to the terms and conditions

JavaScript:

const terms = document.getElementById('terms');
if (!terms) throw new Error('Чекбокс условий не найден');
if (!terms.checked) {
  alert('Пожалуйста, примите условия, чтобы продолжить.');
}

Мини‑методология внедрения валидации

1. Определите требования: какие поля обязательны, какие форматы допустимы.
2. Напишите клиентскую валидацию для быстрого UX.
3. Дублируйте правила на сервере — безопасность прежде всего.
4. Добавьте юнит‑ и e2e‑тесты для основных сценариев.
5. Мониторьте ошибки валидации в логах и поведении пользователей.

Критерии приёмки

• Все обязательные поля отклоняют пустые значения.
• Email проходит проверку формата и сохраняется только после подтверждения (если требуется).
• Пароль соответствует политике безопасности и совпадает с подтверждением.
• Для radio/select доступна проверка “выбрано хотя бы одно”.
• Тест‑кейсы для положительных и негативных сценариев — зелёные.

Тест‑кейсы (пример)

• Ввод валидного email — принимается.
• Ввод ‘user@’ — отклоняется.
• Пароль из 5 символов — отклоняется.
• Пароли не совпадают — отклоняются.
• Не выбран пункт в select — отклоняется.
• Чекбокс “terms” не отмечен — отклоняется.

Контрольный список по ролям

• Разработчик: реализовать клиентскую валидацию и обработку ошибок.
• QA: покрыть тест‑кейсы (валидный/невалидный ввод, граничные значения).
• PM/продукт: утвердить требования к паролям и обязательным полям.

Альтернативные подходы

• HTML5 built‑in валидация: используйте атрибуты required, pattern и type для базовой проверки.
• Серверная валидация: обязательна для безопасности и авторизации.
• Библиотеки: yup, Joi (для сервера), validator.js — удобны для сложных правил.

Когда клиентская валидация не сработает

• Пользователь сознательно отключил JavaScript.
• Злоумышленник отправляет запросы напрямую на API (нужна серверная проверка).
• Сложные проверки, требующие сторонних сервисов (проверка существования email) нельзя сделать полностью на клиенте.

Безопасность и приватность

Клиентская валидация не защищает от XSS или SQL‑инъекций. Всегда очистите и проверьте данные на сервере. Если вы собираете персональные данные (email, имя), обеспечьте соответствие требованиям конфиденциальности (например, GDPR) — храните минимум необходимой информации и давайте пользователю понятную политику конфиденциальности.

Поток принятия решения (Mermaid)

flowchart TD
  A[Пользователь отправляет форму] --> B{JS доступен?}
  B -- Да --> C[Клиентская валидация]
  C --> D{Прошло?}
  D -- Да --> E[Отправить на сервер]
  D -- Нет --> F[Показать ошибки]
  B -- Нет --> E
  E --> G[Серверная валидация]
  G --> H{Прошло?}
  H -- Да --> I[Сохранить данные]
  H -- Нет --> J[Вернуть ошибки клиенту]

Быстрые советы по UX

• Показывайте ошибки рядом с полем, а не в alert, для лучшего восприятия.
• Подсвечивайте поле и добавляйте конкретное сообщение (например, “Минимум 6 символов”).
• Валидация в реальном времени полезна, но не раздражайте пользователя слишком агрессивными проверками.

Итог

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

Важно: начните с минимально необходимых правил и улучшайте валидацию по метрикам ошибок и фидбеку пользователей.