Валидация формы на пустое поле required в JavaScript: полное руководство

[hannadev]

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

Зачем это нужно? Пользователи часто пропускают поля, а стандартная валидация браузера может не подойти под дизайн или логику приложения. С JavaScript вы получите гибкость: проверку на лету, стилизацию ошибок и полную интеграцию с формой. Разберём, как реализовать проверку required шаг за шагом.

HTML5-валидация: атрибут required без JavaScript

Атрибут required — это встроенная фича HTML5, которая блокирует отправку формы, если поле пустое. Браузер автоматически показывает подсказку вроде «Заполните это поле» и применяет CSS-псевдоклассы :invalid и :required. Это работает из коробки для input, textarea и select.

Представьте простую форму регистрации: поля имя и email с required. При submit без заполнения браузер не даст отправить данные и подсветит ошибку. Но стандартные сообщения не всегда вписываются в дизайн, а кастомизация через чистый HTML ограничена. Поэтому часто подключают JavaScript для большего контроля.

Вот базовый пример:

<form>
  <label for="name">Имя:</label>
  <input id="name" name="name" required>
  <button>Отправить</button>
</form>

• Плюсы HTML5: Никакого JS, работает везде, доступно для screen readers.
• Минусы: Стандартные сообщения на языке браузера, сложно стилизовать.
• Нюанс: Добавьте novalidate к форме, чтобы отключить браузерную валидацию и взять всё на себя в JS.

Атрибут	Описание	Пример
required	Обязательное поле	<input required>
:invalid	Стилизация ошибки	input:invalid { border: red; }
novalidate	Отключить HTML-валидацию	<form novalidate>

JavaScript-проверка required на событии submit

Самый надёжный способ — проверять поля при отправке формы через addEventListener(‘submit’). Собираем все required-поля, проходим циклом и проверяем .value. Если хоть одно пустое — блокируем submit с preventDefault() и показываем ошибку.

Это лучше встроенной валидации, потому что вы контролируете логику: можете проверять на пробелы, trim’ить значения или комбинировать с другими правилами. Добавьте класс ошибки для CSS-стилизации и очищайте его при вводе. Такой подход масштабируется на сложные формы с динамическими полями.

Пример кода для формы:

document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();
  let isValid = true;
  const requiredFields = this.querySelectorAll('[required]');
  
  requiredFields.forEach(field => {
    if (!field.value.trim()) {
      field.classList.add('error');
      isValid = false;
    } else {
      field.classList.remove('error');
    }
  });
  
  if (isValid) {
    // Отправка формы
    console.log('Форма валидна');
  }
});

• Укажите data-required для кастомных селекторов.
• Используйте matches(‘input[required]’) для точной фильтрации.
• Важно: Всегда trim() значение, чтобы игнорировать пробелы.

Метод	Когда срабатывает	Плюсы
submit	При клике Отправить	Блокирует отправку
click	На кнопке	Точная привязка
beforeunload	Перед закрытием	Сохраняет данные

Валидация на лету: реал-тайм проверка input

Проверка required не только на submit, но и при вводе — отличный UX. Слушайте событие ‘input’ или ‘blur’, проверяйте поле мгновенно и меняйте стили. Пользователь видит статус сразу, без ожидания отправки.

Это решает проблему «почему форма не отправляется?». Добавьте счётчик символов или иконку успеха. Для сложных форм комбинируйте с debounce, чтобы не спамить проверки при быстром наборе. Такой подход популярен в современных SPA.

Код для live-валидации:

const input = document.getElementById('username');

input.addEventListener('input', function() {
  if (this.value.trim()) {
    this.style.borderColor = 'green';
    this.setCustomValidity('');
  } else {
    this.style.borderColor = 'red';
    this.setCustomValidity('Поле обязательно');
  }
});

• input: Срабатывает на каждый символ.
• blur: Только при потере фокуса.
• keyup: Альтернатива для старых браузеров.
• Совет: Используйте setCustomValidity() для кастомных сообщений.

Constraint Validation API: продвинутый уровень

Браузеры дают мощный Constraint Validation API для работы с required, validity и validationMessage. Проверяйте field.validity.valueMissing для пустых required-полей. Это сочетает HTML5 и JS в одном флаконе.

API возвращает объект validity с флагами: valueMissing, valid, customError. Методы checkValidity(), reportValidity() запускают валидацию вручную. Идеально для динамических форм, где поля добавляются/удаляются.

Пример с API:

function validateField(field) {
  if (!field.checkValidity()) {
    field.reportValidity();
    return false;
  }
  return true;
}

• validity.valueMissing: Пустое required-поле.
• setCustomValidity(‘Текст’): Своё сообщение.
• checkValidity(): Возвращает true/false.
• Нюанс: Работает только с HTML5-атрибутами.

Свойство	Значение	Описание
valueMissing	true	Пустое required
valid	true/false	Общая валидность
validationMessage	Строка	Текст ошибки

Масштабирование для сложных форм

Когда форма растёт, создайте класс или функцию для унифицированной валидации всех required-полей. Ищите поля по data-js-validate, группируйте ошибки и обрабатывайте множественные submit. Поддержите aria-describedby для accessibility.

Это уровень production: интегрируйте с AJAX, локализацией сообщений и тестами. Проверяйте на сервере тоже — клиентская валидация не заменяет бэкенд.

Пример класса:

class FormValidator {
  constructor(form) {
    this.form = form;
    this.init();
  }
  init() {
    this.form.addEventListener('submit', this.validate.bind(this));
  }
  validate(e) {
    e.preventDefault();
    // Логика...
  }
}
new FormValidator(document.getElementById('myForm'));

Ключевые практики для больших форм

Думайте о производительности: не проверяйте всю форму на каждый input. Тестируйте на мобильных — touch-события отличаются. Оставьте простые формы на HTML5, а сложные — на JS с библиотеками вроде Validator.js.