В шаблоне «Чертоги Фрилансера» v3.0.0 (далее ЧФ) реализован функционал, помогающий решать разные рутинные задачи при работе с формами.
В этом документе описан общий функционал работы с полями, плейсхолдерами, валидацией, вариантами отправки форм и т.п.
В отдельных разделах будет описан функционал конкретных элементов форм, таких как:
- Отправка писем на почту (PHPMailer)
- Кастомизация элемента SELECT
- Кастомизация (стилизация) элементов CHECKBOX и RADIO
- Модуль «Маски» для полей ввода
- Модуль «Звездный рейтинг»
- Модуль «Количество»
- Модуль «Range» (ползунок)
Работа с полями форм
Работа с полями форм подразумевает следующий функционал:
- Добавление классов полю и его отцу при фокусе
- Функционал «Показать пароль» для полей с типом password
- Возможность моментальной валидации поля при потере фокуса
Чтобы подключить общий функционал к работе с полями форм, необходимо раскомментировать функцию flsForms.formFieldsInit({…}) в файле js/app.js :
flsForms.formFieldsInit({
viewPass: false,
autoHeight: false
});Передавать функции можно с помощью следующих параметров:
- viewPass – позволяет включить функционал «Показать пароль» . true – включено, false – выключено (по умолчанию).
- autoHeight – позволяет включить функционал Автовысота для текстовой области. true – включено, false – выключено (по умолчанию).
Работа с атрибутом placeholde
Для того чтобы надпись имеющейся в атрибуте поля формы placeholder исчезала при фокусе, необходимо добавить в поле класс input и раскомментировать @import “input”; в файле scss/base/forms/forms.scss . Если нам нужно отключить укрытие для конкретного поля, следует добавить атрибут data-placeholder-nohide
Добавление классов
По умолчанию, после подключения flsForms.formFieldsInit({…}) , при возникновении фокуса, к полю и его непосредственному родительскому элементу, прибавится класс _form-focus . Если нам нужно отключить добавление классов для конкретного поля, ему следует добавить атрибут data-no-focus-classes
Валидация поля при потере фокуса
Чтобы скрипт начал вызывать функционал валидации поля в момент потери им фокуса, следует добавить полю атрибут data-validate .
Следует добавить, что функционал работы с полями форм также удалит ошибку добавленного к полю валидатора при получении фокуса. Подробнее о функционале валидации полей смотрите в этом документе.
Функционал «Показать пароль»
Функционал «Показать пароль» позволяет отображать зашифрованное значение поля с типом password при нажатии на объект с классом, содержащим строку «__viewpass», который находится вместе с полем в одном родителе:
<form class="form" action="#">
<div class="form__line">
<input autocomplete="off" type="password" name="form[]" value="123456">
<button class="form__viewpass" type="button">Показать пароль</button>
</div>
<button type="submit" class="button">Отправить</button>
</form>В момент клика на объект с классом, содержащим строку __viewpass, к нему добавляется класс _viewpass-active , а тип поля ввода изменяется на text. Повторное нажатие выполнит ответные действия.
Напомню, чтобы включить функционал “Показать пароль”, следует указать true для параметра viewPass при подключении функционала в файле js/app.js .
Функционал «Автовысота» для textarea
Функционал “Автовысота” позволяет элементу textarea автоматически подстраиваться по высоте под вводимый текст.
Для включения необходимо назвать true для параметра autoHeight , а также добавить атрибут data-autoheight элементe(ам) textarea.
<textarea name="message" data-autoheight></textarea>Дополнительно можно указать следующие параметры:
- data-autoheight-min=’число’ – минимальная (стартовая) высота textarea
- data-autoheight-max=’ число’ – максимальная высота textarea
Валидация элементов форм
Для включения функционала следует раскомментировать функцию flsForms.formSubmit(); и/или flsForms.formFieldsInit({…}) в файле js/app.js
Чтобы элемент формы начал проходить валидацию, ему следует добавить атрибут data-required . Теперь при отправке формы, а также если элементу добавлен атрибут data-validate , он будет проверяться на предмет правильного заполнения.
При добавленном атрибуте data-validate валидация будет происходить мгновенно при потере полем фокуса
Чтобы включить особые правила валидации поля, атрибут следует добавить одно из значений:
- email – включит валидацию на ввод коретного E-mail
- идет работа над новыми пресетами
Пример:
<input data-required="email" type="text" name="form[]">Если элемент заполнен неправильно, к нему и к его отцу прибавится класс _form-error . Если мы хотим дополнительно вывести произвольный текст ошибки, следует указать его в атрибуте data-error и добавить в поле:
<input data-error="Введен не верный E-mail" data-required="email" type="text" name="form[]">Теперь, при возникновении ошибки валидации, под элементом будет добавлен объект с классом form__error , содержащий ваш текст ошибки.
Напомним, что функционал работы с полями удалит классы ошибок и объект с классом form__error при получении полем фокуса.
Для отключения валидации элементов конкретной формы ей следует добавить атрибут
data-no-validate
Отправка форм
Для включения функционала следует раскомментировать функцию flsForms.formSubmit(); в файле js/app.js :
Валидация элементов формы
По умолчанию при отправке формы поля отмеченные data-required/data-required=’…’ будут проходить валидацию. Для отключения валидации элементов конкретной формы ей следует добавить атрибут data-no-validate
Режимы отправки формы
В ЧФ существует несколько режимов контроля передачи форм:
- Стандартная HTML отправка формы (по умолчанию) – если валидация пройдена (была включена), форма отправится на указанный в атрибуте action адрес (с переходом страницы), методом указанным в атрибуте метод.
- AJAX отправка формы – если валидация пройдена (была включена), форма отправится AJAX запросом на указанный в атрибуте action адрес, методом указанным в атрибуте method. Страница не перезагрузится, все элементы формы вернутся в исходные значения (очистка формы).
- Режим имитации отправки формы – если валидация пройдена (была включена), форма никуда не отправится, страница не перезагрузится, все элементы формы вернутся к исходным значениям (очистка формы). Используется для демонстрации дополнительных возможностей, таких как показ попапа об успешной отправке.
Для включения режима AJAX передачи достаточно добавить форме атрибут data-ajax , а если нужный режим имитации передачи добавляем атрибут data-dev .
<form data-ajax class="form" method="POST" action="sendmail.php">
...
</form>Прокрутка к элементу с ошибкой
Бывает, что форма очень велика и при возникновении ошибки валидации хорошо показать элемент с ошибкой пользователю. Для этого есть функционал «прокрутка к элементу с ошибкой». Для включения достаточно добавить форме атрибут data-goto-error
<form data-goto-error class="form" action="#">
...
</form>Показ попапа после отправки формы
Если необходимо, после отправки формы, показать попап добавляем в форму атрибут data-popup-message и как значение указываем селектор попапа
Только для режимов data-ajax или data-dev . Функционал попапов также должен быть подключен
<form data-dev data-popup-message="#form-message" class="form" action="#">
...
</form>События
После каждой отправки формы срабатывает событие в formSent , его можно отловить в любой части кода:
document.addEventListener("formSent", function (e) {
// Форма
const currentForm= e.detail.form;
});Расположение и дополнительные данные
Функции formFieldsInit() , formSubmit() и объект formValidate находятся в файле js/files/forms/form.js