Проверка полей в MODX Revolution с использованием FormIt и jQuery.
- Если у вас не установлен FormIt, пожалуйста, посетите: FormIt - MODX Документация
- “Официальный” пример создания простой формы с FormIt: Простая FormIt контакт-страница
- Не забывайте зарузить последнюю версию jQuery.
Отлично давайте начнём, вначале нужно вызвать наш сниппет FormIt:
Чанк вывода контакт формы contactFormTpl:
Добавим нашу форму:
В этом примере мы проверяем два поля ввода и область текста: Name, Email и Comments.
Элементы, которые подлежат проверке должны иметь класс class=“required”
Добавим проверку полей с помощью jQuery.
Мы должны споймать формы на отправке сообщения, чтобы убедиться в том, что подлежащие проверке поля имеют значения.
Теперь у нас есть контроль над формой и мы можем добавить нашу проверку.
Отлично, давайте разберём этот код по частям.
Во-первых мы выбрали наши элементы используя переменную “elem”:
Далее мы прошли через каждый элемент:
Если он содержит класс “required”, то проверялось пустое ли значение или значение по-умолчанию:
Если он не соответствовал требованиям шла установка “error” в true и сохранение ID:
Если ошибка установлена в true, фокус переходил на первый требуемый элемент и возвращался false (прерывание отравки):
Если все требуемые поля заполнены, очистка значений по-умолчанию непроверяемых полей и разрешение на отправку сообщения:
Проверка Email поля
Мы убедились в том, что все требуемые поля заполнены, теперь нам нужно убедится, что пользователь заполнил поле почты правильно.
Регулярное выражение выше проверяет формат адреса и возвращает true, если он валидный.
Если email не валидный, то метка будет заменена нашим сообщением о ошибке, если адрес в порядке, то сообщение останется неизменным.
Давайте сложим всё вместе
validate-form.js
Чанк: contactFormTpl:
HTML код страницы контакта
Оригинал статьи: MODX Tutorial: Formit with jQuery Validation