AjaxForm вывод своего pop-up, валидация форм.
Добрый день. Прошу помочь разобраться.
Вопрос №1:
AjaxForm имеет свои встроенные pop-up окна. Но я бы хотел выводить свой вариант pop-up окна. Я конечно мог бы повесить свои css стили на уже имеющиеся варианты, но все таки было бы лучше разобраться досконально. Как заставить AjaxForm при успешной отправке формы выводить мое сообщение с моими стилями?
Вопрос №2:
Как работает валидация? Она проверяет значения полей min-length или max-length? Как реально работают следующие строки:
Вопрос №3:
Из документации так и не понял, как научить AjaxForm добавлять css класс — error, при наличии ошибки валидации.
Перед написанием вопроса была изучена информация здесь
bezumkin.ru/sections/components/2070/
и здесь
docs.modx.pro/components/ajaxform
Вопрос №1:
AjaxForm имеет свои встроенные pop-up окна. Но я бы хотел выводить свой вариант pop-up окна. Я конечно мог бы повесить свои css стили на уже имеющиеся варианты, но все таки было бы лучше разобраться досконально. Как заставить AjaxForm при успешной отправке формы выводить мое сообщение с моими стилями?
Вопрос №2:
Как работает валидация? Она проверяет значения полей min-length или max-length? Как реально работают следующие строки:
&validate=`name:required,email:required,message:required`
?Вопрос №3:
Из документации так и не понял, как научить AjaxForm добавлять css класс — error, при наличии ошибки валидации.
Перед написанием вопроса была изучена информация здесь
bezumkin.ru/sections/components/2070/
и здесь
docs.modx.pro/components/ajaxform
Комментарии: 7
Никто даже не натолкнет на мысль? :(
В вопросе №3
Вы привели ссылки там есть ответы на вопросы №1 и №3.
Вопрос №2
Параметр required, проверяет на то что бы поле было заполнено.
Соответственно name:required,email:required,message:required -> Имя, E-mail и Сообщение обязательны для заполнения.
Вы привели ссылки там есть ответы на вопросы №1 и №3.
Вопрос №2
Параметр required, проверяет на то что бы поле было заполнено.
Соответственно name:required,email:required,message:required -> Имя, E-mail и Сообщение обязательны для заполнения.
Правильно ли я понял, этот код поможет мне при выводе правильных pop-up окон?
<?php
if (empty($_POST['name'])) {
return $AjaxForm->error('Ошибки в форме', array(
'name' => 'Вы не заполнили имя'
));
}
else {
return $AjaxForm->success('Форма прошла проверку');
}
1. AjaxForm при выполнении регистрирует событие 'af_complete'. Следовательно, нужно повесить на него событие и проверить возвращаемый ответ:
2. Валидация на уровне php выполняется сниппетом Formlt. (подробнее)
3. Это реализуется при помощи плейсхолдеров и дефолтных скриптов AjaxForm.
$(document).on('af_complete', function(event, response) {
if (response.form.attr('id') == 'айди_формы' && response.success == true) {
//желаемый код алертов
}
});
Но не стоит забывать, что это не отменит втроенный алерт из коробки. Т.е. желательно также добавить в вызов сниппета параметр &frontend_js, указывающий на кастомный скрипт обработки формы без вывода итогового алерта.2. Валидация на уровне php выполняется сниппетом Formlt. (подробнее)
3. Это реализуется при помощи плейсхолдеров и дефолтных скриптов AjaxForm.
Спасибо! С пунктом 2 и 3 вроде все понятно. А вот первый первый пункт вгоняет в тоску, думаю, что придется начать не с события 'af_complete', а с покупки книги JS для начинающих)
Ну, знание js явно не будет лишним..)
С другой стороны, если вы хотите высветить алерт из какой-то произвольной библиотеки, то инициализировать его внутри вышеописанного кода не составит проблем. Если же вы хотите высветить свою стилизацию/текст при помощи идущего в комплекте с AjaxForm jGrowl, то его вызов тоже довольно легко воспринимается наитивно..)
Что же до удаления дефолтного алерта, то реализуется примерно так:
— копируем этот код в произвольный файл
— в вызове сниппета AjaxForm указываем при помощи настройки &frontend_js путь до свежесозданного файла
— в самом файле удаляем вот эту строку
(аналогичным способом можно также удалить другие типы алертов, избавляясь от строчек, начинающиеся с AjaxForm.Message)
С другой стороны, если вы хотите высветить алерт из какой-то произвольной библиотеки, то инициализировать его внутри вышеописанного кода не составит проблем. Если же вы хотите высветить свою стилизацию/текст при помощи идущего в комплекте с AjaxForm jGrowl, то его вызов тоже довольно легко воспринимается наитивно..)
Что же до удаления дефолтного алерта, то реализуется примерно так:
— копируем этот код в произвольный файл
— в вызове сниппета AjaxForm указываем при помощи настройки &frontend_js путь до свежесозданного файла
— в самом файле удаляем вот эту строку
(аналогичным способом можно также удалить другие типы алертов, избавляясь от строчек, начинающиеся с AjaxForm.Message)
Попробую разобраться, спасибо за развернутый комментарий!
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.