Валидация

Материал из Энциклопедия интернет-маркетинга MarketWiki

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

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

Зачем нужна валидация

[править]

Валидация решает несколько задач, одинаково важных и для бизнеса, и для пользователя.

Целостность данных

[править]

В базу данных должны попадать только корректные записи. Номер телефона должен содержать только цифры и допустимые символы, email должен соответствовать стандартному формату, дата должна быть реальной. Без проверки база быстро засоряется мусором, который невозможно использовать для рассылок, аналитики или CRM.

Безопасность

[править]

Через формы злоумышленники могут пытаться внедрить вредоносный код, переполнить буфер или обойти авторизацию. Валидация на стороне сервера отсекает такие попытки, проверяя, что данные действительно являются тем, за что себя выдают, а не куском SQL-запроса или JavaScript-скрипта.

Удобство пользователя

[править]

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

Виды валидации

[править]

Клиентская валидация

[править]

Выполняется в браузере пользователя до отправки данных на сервер. Реализуется через атрибуты HTML или JavaScript.

Валидация через HTML:

Современный HTML предоставляет встроенные инструменты для базовой проверки без единой строчки JavaScript:

  • required - поле обязательно для заполнения
  • type="email" - проверка формата email
  • type="tel" - вызов цифровой клавиатуры на мобильных устройствах (без строгой проверки формата)
  • minlength и maxlength - минимальная и максимальная длина текста
  • min и max - диапазон чисел
  • pattern - проверка по регулярному выражению

HTML-валидация работает быстро, не требует загрузки скриптов и даёт стандартные сообщения об ошибках, которые, однако, выглядят по-разному в разных браузерах и плохо поддаются стилизации.

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

JavaScript даёт полный контроль над процессом проверки. Можно:

  • проверять данные в реальном времени, по мере ввода
  • показывать кастомные сообщения, оформленные в стиле сайта
  • отключать кнопку отправки, пока форма не заполнена корректно
  • проверять сложные зависимости между полями
  • взаимодействовать с сервером без перезагрузки страницы (например, проверять, свободен ли логин)

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

Серверная валидация

[править]

Выполняется после получения данных на сервере и до их сохранения в базу. Это единственный надёжный способ проверки, который нельзя обойти.

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

На сервере проверяются те же параметры, что и на клиенте, плюс дополнительные:

  • существование переданных идентификаторов
  • права пользователя на выполнение действия
  • отсутствие вредоносного кода
  • уникальность данных в базе

При обнаружении ошибки сервер возвращает сообщение, и форма показывается снова с уже введёнными данными и подсвеченными проблемными полями.

Что проверяют

[править]

Обязательность

[править]

Поле должно быть заполнено. Если пользователь оставил его пустым, форма не отправляется, а рядом с полем появляется сообщение «обязательное поле».

Формат

[править]

Данные должны соответствовать ожидаемому формату:

  • email - содержит @ и домен
  • телефон - только цифры, плюс, скобки, тире (в разных странах правила разные)
  • дата - реальная дата, не 31 февраля
  • число - действительно число, а не текст
  • URL - начинается с http:// или https://

Длина

[править]

Текст не должен быть слишком коротким или слишком длинным. Имя из одной буквы - ошибка. Комментарий из тысячи символов для формы обратной связи - тоже ошибка, если это не предусмотрено.

Диапазон

[править]

Числа должны попадать в допустимый диапазон. Возраст от 0 до 120, сумма заказа не больше миллиона, количество товаров не меньше 1.

Уникальность

[править]

Для полей, значений которых не должны повторяться (email при регистрации, логин), требуется проверка на сервере - нет ли уже такого в базе.

Зависимости

[править]

Одни поля могут зависеть от других. Если выбрана доставка курьером, нужно поле с адресом. Если самовывоз - адрес не нужен.

UX-аспекты валидации

[править]

То, как пользователь узнаёт об ошибках, влияет на вероятность того, что он исправит их и отправит форму.

Момент проверки

[править]
  • После отправки - классический подход. Пользователь заполнил всё, нажал кнопку, получил страницу с ошибками. Минус в том, что если ошибок много, это раздражает.
  • После потери фокуса - поле проверяется, когда пользователь перешёл к следующему. Он получает обратную связь сразу и может исправить, не дожидаясь отправки.
  • В реальном времени - проверка идёт по мере ввода. Зелёная галочка появляется сразу, как только введён корректный email. Но если сообщения об ошибках появляются слишком рано, это тоже раздражает.

Сообщения об ошибках

[править]

Хорошее сообщение об ошибке должно:

  • быть рядом с проблемным полем
  • объяснять, что именно не так, а не просто «ошибка»
  • подсказывать, как исправить
  • быть написано понятным языком, без технических терминов
  • не исчезать, пока ошибка не исправлена

Визуальное выделение

[править]

Проблемные поля подсвечивают красным. Рядом ставят иконку с восклицательным знаком. Корректно заполненные поля можно отмечать зелёной галочкой - это даёт чувство прогресса.

Сохранение данных

[править]

При возврате формы с ошибками все уже введённые данные должны оставаться на месте. Заставлять пользователя заполнять всё заново - верный способ потерять лида.

Техническая реализация

[править]

HTML5

[править]
<input type="email" name="email" required placeholder="ivan@example.ru">
<input type="tel" name="phone" pattern="^\+?[0-9\s\-\(\)]+$" placeholder="+7 123 456-78-90">

JavaScript

[править]
const emailField = document.getElementById('email');
const emailError = document.getElementById('email-error');

emailField.addEventListener('input', function() {
  if (this.validity.valid) {
    emailError.textContent = '';
    emailError.className = 'valid';
  } else {
    showError();
  }
});

PHP (пример серверной валидации)

[править]
$email = $_POST['email'];
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  $errors['email'] = 'Укажите корректный email';
}
if (empty($_POST['name'])) {
  $errors['name'] = 'Имя обязательно для заполнения';
}

Ошибки при реализации валидации

[править]
  • Только клиентская валидация. Безопасность отсутствует, данные можно подделать.
  • Сообщения общего характера. «Ошибка заполнения» без указания поля и причины бесполезны.
  • Исчезновение данных. Форма сбросилась, пользователь вводит всё заново.
  • Чрезмерная строгость. Телефон не принимается, если введён не строго по шаблону, хотя звонок пройдёт.
  • Слишком поздняя проверка. Пользователь узнаёт об ошибках только после отправки.
  • Раздражающие сообщения. Ошибка появляется, как только пользователь начал печатать, хотя он ещё не закончил.

Связанные термины

[править]
Источник — https://marketwiki.ru/index.php?title=Валидация&oldid=3973