Прокрутка к ошибкам валидации

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

Выбор целевых элементов для прокрутки

Для начала необходимо определить, какие элементы будут целевыми для прокрутки. Обычно это поля формы с классом .error или атрибутом data-error. Например:

<form id="registrationForm">
  <label>Имя</label>
  <input type="text" name="name" class="error" />
  
  <label>Email</label>
  <input type="email" name="email" />
  
  <label>Пароль</label>
  <input type="password" name="password" class="error" />
  
  <button type="submit">Отправить</button>
</form>

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

Подключение библиотеки Smooth Scroll

Smooth Scroll можно использовать как чисто JavaScript библиотеку или через npm. Пример подключения через CDN:

<script src="https://cdn.jsdelivr.net/npm/smooth-scroll@16/dist/smooth-scroll.polyfills.min.js"></script>

Или через npm:

npm install smooth-scroll

Инициализация Smooth Scroll

Создаётся экземпляр Smooth Scroll, который будет отвечать за плавную прокрутку:

const scroll = new SmoothScroll();

По умолчанию Smooth Scroll прокручивает к якорям, но его можно адаптировать для прокрутки к произвольным элементам.

Прокрутка к первому полю с ошибкой

Чтобы автоматически прокручивать к первому элементу с классом .error, используется следующий подход:

document.getElementById('registrationForm').addEventListener('submit', function(event) {
  event.preventDefault();

  const firstError = this.querySelector('.error');
  if (firstError) {
    scroll.animateScroll(firstError);
    firstError.focus();
  }
});

Здесь:

  • querySelector('.error') находит первый элемент с ошибкой.
  • scroll.animateScroll(firstError) выполняет плавную прокрутку.
  • firstError.focus() устанавливает фокус на поле, облегчая ввод исправления ошибки.

Настройка параметров прокрутки

Smooth Scroll поддерживает настройку скорости и смещения:

const scroll = new SmoothScroll(null, {
  speed: 800, // время прокрутки в миллисекундах
  offset: 50, // смещение от верхней границы окна
  easing: 'easeInOutCubic' // функция плавности прокрутки
});
  • speed – регулирует скорость анимации.
  • offset – полезно при фиксированных шапках сайта, чтобы элемент не оказался скрыт под навигационной панелью.
  • easing – функция сглаживания движения для более естественной прокрутки.

Обработка нескольких ошибок

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

const errors = form.querySelectorAll('.error');
errors.forEach((el) => {
  el.classList.add('highlight');
});

highlight может содержать анимацию или временное изменение цвета, чтобы привлечь внимание к проблемным полям.

Интеграция с валидацией

Smooth Scroll эффективно работает в сочетании с клиентской валидацией через JavaScript. Пример валидации:

function validateForm(form) {
  let isValid = true;
  const fields = form.querySelectorAll('input');
  fields.forEach(field => {
    field.classList.remove('error');
    if (!field.value) {
      field.classList.add('error');
      isValid = false;
    }
  });
  return isValid;
}

form.addEventListener('submit', function(event) {
  event.preventDefault();
  if (!validateForm(this)) {
    const firstError = this.querySelector('.error');
    scroll.animateScroll(firstError);
    firstError.focus();
  } else {
    this.submit();
  }
});

Советы по UX

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

Вывод

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

Оглавление