Подсветка ошибок

Shepherd.js предоставляет гибкий механизм для создания интерактивных туров по веб-приложению. Одним из мощных инструментов является подсветка элементов интерфейса, особенно при работе с формами и сложными интерфейсными компонентами, где важно указать пользователю на ошибку или некорректное действие.

Настройка шага с подсветкой

Каждый шаг в Shepherd создаётся через метод addStep. Для подсветки ошибок ключевым параметром является highlightElement. Он позволяет визуально выделить элемент, на который необходимо обратить внимание пользователя:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  }
});

tour.addStep({
  id: 'error-step',
  text: 'Это поле заполнено неверно. Пожалуйста, исправьте значение.',
  attachTo: { element: '#username', on: 'bottom' },
  highlightElement: true,
  buttons: [
    {
      text: 'Закрыть',
      action: tour.next
    }
  ]
});

Важно: highlightElement: true создаёт визуальный акцент вокруг элемента, делая его заметным. Shepherd автоматически добавляет тень и границу, что помогает привлечь внимание без вмешательства в CSS страницы.

Динамическая проверка ошибок

Для интерактивных форм часто требуется подсвечивать элемент только при возникновении ошибки. Это достигается с помощью слушателей событий:

document.querySelector('#username').addEventListener('blur', () => {
  const input = document.querySelector('#username');
  if (!input.value || input.value.length < 3) {
    tour.show('error-step');
  }
});

В этом примере шаг с подсветкой появляется только если поле пустое или содержит менее трёх символов. Это позволяет интегрировать Shepherd с системой валидации форм.

Кастомизация внешнего вида подсветки

Shepherd.js использует для подсветки стандартный класс .shepherd-element и добавляет дополнительные стили. Для выделения ошибок можно использовать кастомные CSS-классы:

.shepherd-element.highlight-error {
  border: 2px solid red;
  box-shadow: 0 0 10px red;
  border-radius: 5px;
}
tour.addStep({
  id: 'custom-error-step',
  text: 'Ошибка ввода в поле email.',
  attachTo: { element: '#email', on: 'right' },
  classes: 'highlight-error',
  buttons: [{ text: 'Понятно', action: tour.next }]
});

Использование кастомного класса позволяет не только менять цвет рамки, но и добавлять анимации, дополнительные подсказки или визуальные эффекты.

Подсветка нескольких элементов одновременно

Иногда необходимо указать несколько полей с ошибками сразу. В Shepherd.js это реализуется через создание нескольких шагов с короткими идентификаторами и вызов их последовательно или параллельно:

const errorFields = ['#username', '#email', '#password'];

errorFields.forEach((selector, index) => {
  tour.addStep({
    id: `error-step-${index}`,
    text: `Проблема с полем ${selector}`,
    attachTo: { element: selector, on: 'top' },
    highlightElement: true,
    buttons: [{ text: 'Далее', action: tour.next }]
  });
});

Такой подход позволяет создать цепочку подсветок, сопровождающую пользователя через все проблемные поля формы.

Адаптивная подсветка и управление туром

Shepherd.js позволяет управлять показом шагов программно, что особенно полезно при асинхронной валидации:

async function validateForm() {
  const errors = await checkFormFields();
  if (errors.length) {
    tour.hide();
    errors.forEach(error => {
      tour.show(`error-step-${error.fieldIndex}`);
    });
  }
}

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

Интеграция с современными фреймворками

Shepherd.js легко интегрируется с React, Vue и Angular. Для подсветки ошибок в компонентах реактивных фреймворков рекомендуется использовать ссылки на DOM через ref и управлять шагами через жизненный цикл компонента:

useEffect(() => {
  if (errorState.username) {
    tour.show('error-step-0');
  }
}, [errorState.username]);

Это обеспечивает плавную и корректную подсветку элементов, даже если они динамически создаются или изменяются.

Заключение по использованию подсветки ошибок

Ключевыми аспектами при работе с подсветкой ошибок являются:

  • Использование highlightElement для визуального выделения.
  • Динамическое управление шагами через события и состояния валидации.
  • Кастомизация внешнего вида через CSS-классы.
  • Возможность подсвечивать несколько элементов последовательно.
  • Интеграция с асинхронными проверками и современными фронтенд-фреймворками.

Эти инструменты делают Shepherd.js мощным средством для создания интерактивных и информативных пользовательских туров с акцентом на ошибки и подсказки.

Оглавление