DOM события форм

События форм позволяют JavaScript реагировать на заполнение, изменение и отправку HTML-форм — это основа клиентской валидации и интерактивных интерфейсов ввода.

Зачем нужно

Без обработки событий форм нельзя реализовать валидацию на лету, поисковые подсказки, автосохранение черновиков или перехват отправки для AJAX-запроса. События форм покрывают весь цикл взаимодействия пользователя с вводом: фокус → ввод → изменение → отправка.

Где используется

  • Клиентская валидация перед отправкой (submit)
  • Поиск с автодополнением (input на поле поиска)
  • Отправка форм через fetch без перезагрузки страницы
  • Маски ввода и форматирование телефонов, карт (input)
  • Фиксация ухода из поля для показа ошибки (blur)
  • Зависимые поля (тип доставки → адрес) через change

Основной контент

Основные события

Событие Когда срабатывает
submit Форма отправлена (кнопка или Enter)
input Значение поля изменилось (каждый символ)
change Значение зафиксировалось (после blur или для select/checkbox)
focus Поле получило фокус
blur Поле потеряло фокус
reset Форма сброшена в начальное состояние
focusin Фокус (всплывает, в отличие от focus)
focusout Потеря фокуса (всплывает)

Перехват отправки

const form = document.querySelector('#signup-form');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // отменяем перезагрузку страницы

  const data = new FormData(form);
  const email = data.get('email');

  if (!email.includes('@')) {
    showError('Введите корректный email');
    return;
  }

  fetch('/api/signup', {
    method: 'POST',
    body: data,
  }).then(/* ... */);
});

Событие input — реакция на ввод

const search = document.querySelector('#search');

search.addEventListener('input', (e) => {
  const query = e.target.value.trim();
  if (query.length > 2) {
    fetchSuggestions(query);
  }
});

Событие change

const select = document.querySelector('#country');

select.addEventListener('change', (e) => {
  const country = e.target.value;
  loadCities(country); // загрузить города для выбранной страны
});

// Для чекбокса
const checkbox = document.querySelector('#agree');
checkbox.addEventListener('change', () => {
  submitBtn.disabled = !checkbox.checked;
});

Focus и blur — валидация по уходу

const emailInput = document.querySelector('#email');
const error = document.querySelector('#email-error');

emailInput.addEventListener('blur', () => {
  if (!emailInput.value.includes('@')) {
    error.textContent = 'Введите корректный email';
    emailInput.classList.add('invalid');
  } else {
    error.textContent = '';
    emailInput.classList.remove('invalid');
  }
});

FormData — сбор всех значений

const form = document.querySelector('form');
const data = new FormData(form);

data.get('username');           // одно поле по name
data.getAll('tags');            // массив (для multiple select, checkbox-группы)
Object.fromEntries(data);       // в обычный объект

// Отправить как JSON
fetch('/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(Object.fromEntries(data)),
});

Частые ошибки

  • Не вызывают e.preventDefault() при submit — форма отправляется с перезагрузкой страницы, AJAX-логика не работает.
  • Используют change вместо input для поиска — change срабатывает только после потери фокуса, поисковые подсказки не обновляются в реальном времени.
  • Забывают name на полях — FormData собирает только поля с атрибутом name; без него данные будут пустыми.
  • Вешают submit на кнопку вместо формы — если пользователь нажимает Enter в текстовом поле, кнопка не получит событие click, но form получит submit.

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

Ресурсы