В шаблоне «Чертоги Фрилансера» 4 (ЧФ4) реализован функционал, помогающий решать разные рутинные задачи при работе с формами.
В этом документе описан общий функционал работы с полями, плейсхолдерами, валидацией, вариантами отправки форм и т.п. В отдельных разделах будет описан функционал конкретных элементов форм, таких как:
- Отправка писем на почту (Работа с PHPMailer)
- Компонент «Выбрать»
- Компонент «Чекбокс и радио»
- Компонент «Инпут»
- Компонент «Звездный рейтинг»
- Компонент «Количество»
- Компонент «Ползунок»
- Список дополняется…
Расположение компонента
Файлы компонента находятся в папке src/components/layout/map, здесь вы найдете JS-файлы компонента и настроек, файл HTML с примером кода, а также SCSS-файл для стилизации компонента.
Использование компонента
В HTML или постройте структуру формы с использованием дата-атрибута data- fls-form:
<form data-fls-form method="POST" action="..." ><input required type="email" name="form[email]" data-fls-form-errtext="Error" placeholder="E-mail" class="input"><button type="submit" class="button">Отправить</button></form>Общая работа с полями форм
Работа с полями форм подразумевает следующий функционал:
- Добавление классов полю и его родителю при фокусе
- Возможность моментальной валидации поля при потере фокуса
Добавление классов
По умолчанию, при возникновении фокуса, к полю и его непосредственному родительскому элементу, прибавится класс —form-focus . Если нам нужно отключить добавление классов для конкретного поля, ему следует добавить атрибут data-fls-form-nofocus
Валидация поля при потере фокуса
Чтобы скрипт начал вызывать функционал валидации поля в момент потери им фокуса, следует добавить полю атрибут data-fls-form-validatenow.
Следует добавить, что функционал работы с полями форм также удалит ошибку добавленного к полю валидатора при получении фокуса. Подробнее о функционале валидации полей смотрите в этом документе.
Валидация элементов форм
Чтобы элемент формы стал проходить валидацию, ему следует добавить атрибут required . Теперь при отправке формы, а также если элементу добавлен атрибут data-fls-form-validatenow, он будет проверяться на предмет правильного заполнения.
При добавленном атрибуте data-fls-form-validatenow валидация будет происходить мгновеннопри потере полем фокуса
Чтобы включить особые правила валидации поля можно изменить значение его отрибута type:
- email – включит валидацию на ввод коретного E-mail
- идет работа над новыми пресетами
Пример:
<input required type="email" name="form[]">Если элемент заполнен неправильно, к нему, а также к его родителю будет добавлен класс —form-error . Если мы хотим дополнительно вывести произвольный текст ошибки, следует указать его в атрибуте data-fls-form-errtext и добавить в поле:
<input data-fls-form-errtext="Ошибка E-mail" required type="email" name="form[]">Теперь, при возникновении ошибки валидации, под элементом будет добавлен объект с классом —form-error , содержащий ваш текст ошибки.
Напомню, что функционал с полями удалит классы ошибок и объект с классом —form-error при получении полем фокуса.
Для отключения валидации элементов конкретной формы ей следует добавить атрибут data-fls-form-novalidate
Отправка форм
Валидация элементов формы
По умолчанию при отправке формы поля отмеченные required будут проходить валидацию. Для отключения валидации элементов конкретной формы ей следует добавить атрибут data-fls-form-novalidate
Режимы отправки формы
В ЧФ4 существует несколько режимов контроля передачи форм:
- Стандартная HTML отправка формы (по умолчанию) – если валидация пройдена (была включена), форма отправится на указанный в атрибуте action адрес (с переходом страницы), методом указанным в атрибуте метод.
- AJAX отправка формы – если валидация пройдена (была включена), форма отправится AJAX запросом на указанный в атрибуте action адрес, методом указанным в атрибуте method. Страница не перезагрузится, все элементы формы вернутся в исходные значения (очистка формы).
- Режим имитации отправки формы – если валидация пройдена (была включена), форма никуда не отправится, страница не перезагрузится, все элементы формы вернутся к исходным значениям (очистка формы). Используется для демонстрации дополнительных возможностей, таких как показ попапа об успешной отправке.
Для включения режима AJAX передачи достаточно добавить значение ajax атрибута data-fls-form, а если требуемый режим имитации передачи добавляем значение dev .
<form data-fls-form="ajax" class="form" method="POST" action="...">...</form>Прокрутка к элементу с ошибкой
Бывает, что форма очень велика и при возникновении ошибки валидации хорошо показать элемент с ошибкой пользователю. Для этого есть функционал «прокрутка к элементу с ошибкой». Для включения достаточно добавить форме атрибут data-fls-form-gotoerr
<form data-fls-form-gotoerr class="form" action="...">...</form>Показ попапа после отправки формы
Если необходимо, после отправки формы, показать попап добавляем в форму атрибут data-fls-form-popup и как значение указываем имя попапа
Только для режимов ajax или dev. Компонент попапов также должен быть подключен
<form data-fls-form="ajax" data-fls-form-popup="form-message" class="form" action="...">...</form>События
После каждой отправки формы срабатывает событие в formSent , его можно отловить в любой части кода:
document.addEventListener("formSent", function (e) {
// Форма
const currentForm= e.detail.form
})