Валидация форм на JavaScript: как перестать бояться и начать проверять

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

Digital-студия WNDER

Почему валидация на клиенте — это не роскошь, а необходимость

Валидация на клиенте — это проверка данных до отправки на сервер. Зачем она нужна? Во-первых, экономит время пользователя. Никто не любит ждать ответа от сервера, чтобы узнать, что email введён неправильно. Во-вторых, снижает нагрузку на сервер — меньше мусорных запросов. В-третьих, улучшает пользовательский опыт: мгновенная обратная связь, подсветка ошибок, понятные подсказки.

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

Строим простую валидацию: от интуитивного к структурному

Самый простой способ — использовать встроенные HTML-атрибуты: required, type="email", minlength и так далее. Браузер сам проверит данные при отправке. Но у этого подхода есть минусы: стили ошибок разные в разных браузерах, нельзя полностью контролировать сообщения, и работает только при отправке формы.

Если нужна более тонкая настройка, подключаем JavaScript. Вот классический пример: проверка поля email на корректность.

<form id="myForm">
  <label for="email">Email:</label>
  <input type="text" id="email" name="email">
  <span id="emailError" style="color: red;"></span>
  <br><br>
  <button type="submit">Отправить</button>
</form>

const form = document.getElementById('myForm');
const emailInput = document.getElementById('email');
const emailError = document.getElementById('emailError');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // Останавливаем отправку
  const email = emailInput.value.trim();
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!emailPattern.test(email)) {
    emailError.textContent = 'Пожалуйста, введите корректный email.';
  } else {
    emailError.textContent = '';
    // Здесь можно отправить форму через fetch или AJAX
    alert('Форма отправлена!');
  }
});

Это работает, но если полей много, код раздувается. Хочется чего-то более системного. На помощь приходят специальные библиотеки, например, Validate.js или Parsley.js. Они берут на себя рутину и предоставляют готовые правила. Но если проект небольшой или хочется понять суть, можно написать свою маленькую библиотеку.

Создаём свою систему валидации: шаг за шагом

Давайте сделаем простую, но гибкую систему. Идея такая: у нас есть объект с правилами для каждого поля. При отправке формы проходим по всем полям, проверяем их и выводим сообщения об ошибках.

const validators = {
  required: function(value) {
    return value.trim().length > 0;
  },
  email: function(value) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
  },
  minLength: function(value, param) {
    return value.length >= param;
  },
  maxLength: function(value, param) {
    return value.length <= param;
  }
};

function validateForm(form, rules) {
  const errors = {};
  for (const field in rules) {
    const input = form.elements[field];
    if (!input) continue;
    const value = input.value;
    const fieldRules = rules[field];
    for (const rule of fieldRules) {
      const validatorName = rule.method;
      const param = rule.param;
      const message = rule.message || 'Ошибка в поле ' + field;
      if (!validators[validatorName](value, param)) {
        errors[field] = message;
        break;
      }
    }
  }
  return errors;
}

// Использование
const rules = {
  email: [
    { method: 'required', message: 'Email обязателен' },
    { method: 'email', message: 'Введите корректный email' }
  ],
  password: [
    { method: 'required', message: 'Пароль обязателен' },
    { method: 'minLength', param: 6, message: 'Пароль минимум 6 символов' }
  ]
};

form.addEventListener('submit', function(event) {
  event.preventDefault();
  const errors = validateForm(form, rules);
  if (Object.keys(errors).length === 0) {
    alert('Все ок!');
  } else {
    console.log(errors);
  }
});

Такой подход легко расширять: добавляйте новые валидаторы, комбинируйте правила. Всё выглядит аккуратно и понятно.

Продвинутые техники: проверка в реальном времени и кастомные сообщения

Скучно ждать, пока пользователь нажмёт кнопку. Лучше проверять поле сразу после того, как он закончил вводить. Для этого используем событие blur (когда поле теряет фокус) или input (когда пользователь печатает).

const emailInput = document.getElementById('email');
emailInput.addEventListener('blur', function() {
  const email = emailInput.value.trim();
  if (!validators.email(email)) {
    emailError.textContent = 'Email некорректный';
  } else {
    emailError.textContent = '';
  }
});

Ещё одна полезная вещь — кастомные сообщения об ошибках. Не обязательно показывать стандартные "Поле заполнено неправильно". Можно сделать дружелюбные подсказки. Например, для пароля: "Пароль должен быть не короче 8 символов и содержать хотя бы одну цифру".

А что насчёт сложных сценариев, например, когда одно поле зависит от другого? Скажем, поле "Подтвердите пароль" должно совпадать с полем "Пароль". Это легко реализовать, добавив кастомный валидатор.

validators.match = function(value, param) {
  const otherInput = document.getElementById(param);
  return otherInput && value === otherInput.value;
};

// В правилах
password_confirm: [
  { method: 'required', message: 'Подтвердите пароль' },
  { method: 'match', param: 'password', message: 'Пароли не совпадают' }
]

Это удобно и масштабируется на любые сценарии.

Таблица популярных методов валидации

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

Как избежать типичных ошибок

Частая ошибка — забывать обрабатывать пробелы. Пользователь может случайно ввести пробел в начале или конце. Всегда делайте trim() перед проверкой.

Ещё одна ошибка — слишком строгие правила. Например, запрет на использование специальных символов в имени, хотя они безобидны. Помните: цель валидации — отсеять мусор, а не сделать жизнь пользователя невыносимой.

И, конечно, не забывайте про доступность. Если показываете ошибку, используйте не только цвет, но и текст. Люди с ограниченным зрением могут не различать красный и зелёный.

Что в итоге

Валидация форм на JavaScript — это не ракетостроение. Главное — понять базовые принципы и не пытаться объять необъятное. Начните с простых проверок, затем добавляйте сложные сценарии. И всегда помните о серверной валидации.

Теперь у вас есть инструменты, чтобы сделать ваши формы дружелюбными и надёжными. Идите и творите!