Валидация полей формы

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

Инициализация Shepherd.js

Для начала необходимо подключить Shepherd.js через npm или CDN и создать экземпляр тура:

import Shepherd from 'shepherd.js';
import 'shepherd.js/dist/css/shepherd.css';

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: { enabled: true },
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  }
});

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

Создание шагов с подсветкой полей

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

tour.addStep({
  id: 'username',
  text: 'Введите ваш логин. Он должен содержать минимум 5 символов.',
  attachTo: { element: '#username', on: 'bottom' },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

attachTo определяет элемент формы, к которому привязывается подсказка, а параметр on задаёт позицию подсказки относительно поля.

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

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

tour.addStep({
  id: 'email',
  text: 'Введите адрес электронной почты.',
  attachTo: { element: '#email', on: 'bottom' },
  buttons: [
    {
      text: 'Далее',
      action: () => {
        const emailField = document.querySelector('#email');
        const email = emailField.value;
        if (/^\S+@\S+\.\S+$/.test(email)) {
          tour.next();
        } else {
          alert('Введите корректный email');
        }
      }
    }
  ]
});

В этом примере используется простая регулярная проверка email. Если значение не соответствует формату, переход на следующий шаг блокируется.

Управление условиями видимости шагов

Shepherd.js позволяет динамически показывать или скрывать шаги в зависимости от состояния формы:

tour.addStep({
  id: 'promo-code',
  text: 'Введите промокод, если он у вас есть.',
  attachTo: { element: '#promo', on: 'bottom' },
  buttons: [
    {
      text: 'Пропустить',
      action: tour.next
    },
    {
      text: 'Далее',
      action: () => {
        const promo = document.querySelector('#promo').value;
        if (promo.length > 0 && promo.length < 5) {
          alert('Промокод слишком короткий');
        } else {
          tour.next();
        }
      }
    }
  ],
  when: {
    show: () => {
      const hasPromoField = document.querySelector('#promo') !== null;
      return hasPromoField;
    }
  }
});

Метод when.show позволяет проверять наличие элемента перед отображением подсказки и изменять логику показа шагов в зависимости от состояния формы.

События Shepherd.js и валидация

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

tour.on('complete', () => {
  console.log('Тур завершен');
});

tour.on('show', (event) => {
  const stepId = event.step.id;
  console.log(`Показан шаг: ${stepId}`);
});

Событие show позволяет запускать дополнительную проверку перед отображением шага, а complete — проверять итоговые значения всех полей формы после завершения тура.

Настройка кнопок с условной активацией

В Shepherd.js кнопки можно полностью кастомизировать, включая их активность и видимость в зависимости от валидации:

tour.addStep({
  id: 'password',
  text: 'Введите пароль (не менее 8 символов).',
  attachTo: { element: '#password', on: 'bottom' },
  buttons: [
    {
      text: 'Далее',
      action: tour.next,
      disabled: true,
      classes: 'shepherd-button-disabled'
    }
  ],
  when: {
    show: () => {
      const passwordInput = document.querySelector('#password');
      passwordInput.addEventListener('input', () => {
        const valid = passwordInput.value.length >= 8;
        const btn = document.querySelector('.shepherd-button-disabled');
        btn.disabled = !valid;
        if (valid) btn.classList.remove('shepherd-button-disabled');
        else btn.classList.add('shepherd-button-disabled');
      });
    }
  }
});

В этом примере кнопка «Далее» становится активной только после того, как пользователь введет корректный пароль.

Визуальные эффекты и подсветка ошибок

Shepherd.js поддерживает кастомные классы CSS, что позволяет визуально выделять поля с ошибками:

.input-error {
  border: 2px solid red;
  background-color: #ffe6e6;
}

const emailField = document.querySelector('#email');
if (!/^\S+@\S+\.\S+$/.test(emailField.value)) {
  emailField.classList.add('input-error');
} else {
  emailField.classList.remove('input-error');
}

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

Итеративная проверка и повторные шаги

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

function validateStep(stepId, validator) {
  const value = document.querySelector(`#${stepId}`).value;
  if (validator(value)) {
    tour.next();
  } else {
    alert('Ошибка ввода, попробуйте снова.');
  }
}

tour.addStep({
  id: 'phone',
  text: 'Введите номер телефона',
  attachTo: { element: '#phone', on: 'bottom' },
  buttons: [
    {
      text: 'Далее',
      action: () => validateStep('phone', val => /^\d{10}$/.test(val))
    }
  ]
});

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

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