Если на лету должна проходить валидация — как это организовать?

Для организации валидации на лету (то есть в процессе ввода данных пользователем) обычно используют следующие подходы:

• События ввода: Отслеживать события input, change или keyup на полях формы.
• Дебаунсинг: Чтобы не вызывать валидацию на каждый символ, применяют дебаунсинг — задержку перед запуском проверки.
• Валидация по правилам: Проверять данные по заранее определённым правилам (например, длина, формат, обязательность).
• Отображение ошибок: Показывать пользователю подсказки или сообщения об ошибках рядом с полем.

Пример на JavaScript с использованием дебаунса:

function debounce(fn, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), delay);
  };
}

const validateEmail = (email) => {
  const re = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
  return re.test(email);
};

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

input.addEventListener('input', debounce(() => {
  if (!validateEmail(input.value)) {
    errorMsg.textContent = 'Некорректный email';
  } else {
    errorMsg.textContent = '';
  }
}, 300));

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