Урок 9-3. Formit с проверкой полей на jQuery
Проверка полей в 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
Jun 23 2012 уроки MODx Revolution FormIt дополнения сниппеты jquery Виктор Матушевский
Mebel Mebel
16.10.2012 01:06Спасибо. Вот только когда это реализую - получается что достаточно написать текст сообщения и можно отправлять с этими данными:
First and last name
example@domain.com
и тд... Или я не прав?
Viktor Minator
16.10.2012 01:08name:required, email:email:required, comments:required:stripTags
Евгений
16.12.2013 10:37У меня тоже отправляется только текст сообщения,не подскажите как решить проблему и не происходит редиректа.
Андрей
15.11.2012 21:23Сделал все вточности как здесь. Проверка работает (и с js и без). Но при отправке страница просто перегружается, редиректа не происходит. Письма на почту не приходят.
mail() работает, проверил. Ошибок в логах modx и на хостинге нет.
Подскажите в чем может быть трабл?
Андрей
15.11.2012 23:26Скопипастил отсюда http://rtfm.modx.com/display/ADDON/FormIt.Examples.Simple+Contact+Page
Сенерил и добавил в настройках FormIt private и publick ключи для рекапчи.
Заработало. Буду копать дальше..
Роман Харисович
28.04.2013 11:16Не получилось справиться с уроком. Пожалуйста напишите подробно и пошагово что нужно делать? Не понятно что нужно делать с этим ЯваСкриптом. Нелинейно както этот урок появился.
Никита Котенко
27.07.2013 00:32тоже ничего не вышло. не понятно куда и как правильно вешать вызов функции из подключаемого файла js
Василий Никольников
25.08.2013 16:12Спасибо за хороший материал!
Может подскажете как реализовать проверку select?
Выберите:*
-----------
вариант 1
вариант 2
вариант 3
вариант 4
Если ничего не выбрать отсылает пустое значение
Василий Никольников
25.08.2013 16:18http://clip2net.com/clip/m210698/thumb640/1377436357-clip-7kb.png
Viktor Minator
25.08.2013 17:23закройте первый option - тег
Евгений
16.12.2013 07:43Все здорово вроде работает но письмо на русском языке в аброкадабре какой то ,на английском все ок, где кодировку подправить касательно этой формы?
Евгений
16.12.2013 10:32Так с кириллицей разобрался надо просто скрипт сохранить в кодировке UTF8