Урок 9-3. Formit с проверкой полей на jQuery

MODX Урок: Formit с jQuery валидацией

Проверка полей в MODX Revolution с использованием 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