Шпаргалка по валидации форм в Parsley.js

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

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

// Рекомендуемая инициализация через JavaScript
$('#myForm').parsley({
  errorClass: 'is-invalid',
  successClass: 'is-valid'
});

---

Стандартные ограничения валидации HTML

<!-- Обязательное поле -->
<input required />

<!-- Типы email и url -->
<input type="email" />
<input type="url" />

<!-- Ограничения по длине -->
<input minlength="6" maxlength="20" />
<input data-parsley-length="[6, 20]" />

<!-- Числовые и регулярные шаблоны -->
<input pattern="^[A-Z0-9]+$" />
<input data-parsley-type="digits" />
<input data-parsley-type="alphanum" />

<!-- Числовой диапазон -->
<input type="number" min="1" max="100" />
<input data-parsley-range="[1, 100]" />

<!-- Лимиты выбора чекбоксов -->
<input type="checkbox" name="hobbies" data-parsley-mincheck="2" />

<!-- Проверка совпадения паролей -->
<input id="password" type="password" />
<input type="password" data-parsley-equalto="#password" />

---

JavaScript API форм и полей

Методы формы

const form = $('#myForm').parsley();

form.isValid();   // Возвращает true, если форма валидна, иначе false
form.validate();  // Запускает валидацию и отображает ошибки
form.reset();     // Сбрасывает состояние валидации и очищает ошибки
form.destroy();   // Удаляет обработчики Parsley с формы

Методы поля

const field = $('#username').parsley();

field.isValid();
field.validate(); // Возвращает массив нарушенных ограничений

---

Пользовательские валидаторы

Глобальная регистрация пользовательских валидаторов:

window.Parsley.addValidator('multipleOf', {
  requirementType: 'integer',
  validateNumber(value, requirement) {
    return value % requirement === 0;
  },
  messages: {
    ru: 'Это значение должно быть кратно %s.',
    en: 'This value must be a multiple of %s.'
  }
});

Использование в разметке HTML:

<input type="number" data-parsley-multiple-of="5" />

---

Ссылки и документация

• Официальная документация Parsley.js