Компоненты
Валидация формы
Форма должна быть обёрнута в html элемент c data атрибутом data-form-validate. Для передачи колбеков при сабмите, успеха и ошибки валидации нужно установить дата атрибут data-callback="callback" с указанием типа колбеков. Примеры находятся в файле callback.js
При динамическом добавлении полей в форму, валидация на них будет работать без дополнительной реинициализации. Исключением являются селекты и поля с телефоном
Инициализация форм происходит в main.js. Экземпляр класса записывается в глобальную область видимости. Это делается для того что бы вы могли в проекте при необходимости вызвать один изметодов класса Form
const form = new Form();
form.init();
window.form = form;
Методы
|
window.form.reset(form) |
Сбрасывает форму, для сброса передаётся форма |
|---|---|
|
window.form.initPhoneInput(parent) |
Инициализирует телефонный инпут, для инициализации передаётся родитель инпута. Необходим при динамическом добавлении поля телефона |
|
window.form.validateForm(form) |
Валидирует форму, для валидации передаётся форма |
|
window.form.validateFormElement(item, true) |
Валидирует инпут, для валидации передаётся инпут, второй параметр отвечает за показ сообщения. |
Для сброса формы нужно использовать button(type="reset") или метод window.form.reset(form) с передачей в него формы
Добавлена возмоность валидации на лету. Для этого на родителя инпута нужно повесить дата аттрибут data-on-input-validate
Указания типа валидаци инпута, добавляются на родительский div инпута, если не указать тип то валидироваться инпут не будет! Тип валидации не связан с обязательностью заполнения поля!
Что бы поле являлось обязательным для заполнения на родителя нужно повесить дата аттрибут data-required! Поля форм без дата атрибута data-required на родителе, в случае если указан какой-либо тип валидации будут участвовать в валидации только в том случае если значение value не пустое.
Типы валидации представленные в компоненте
|
data-validate-type="text" |
Валилируется как обычное текстовое поле, инпуту можно указать minlength ограничение, если оно не указано, то минимальное значение при валидации будет равно 1 символу. |
|---|---|
|
data-validate-type="phone" |
Валилируется по длине матрици const matrix = `${BASE_COUNTRY_CODE}${BASE_MATRIX}` где BASE_COUNTRY_CODE = "+7", а BASE_MATRIX = "(___) ___ __ __". Вы можите изменить базовый код страны и базовую матрицу поменяв константы в коде, они находятся в самом верху. |
|
data-validate-type="email" |
Валилируется как обычный email, от 1 символа до @ и от 1 после, затем точка и от 2 до 6 символов после неё |
|
data-validate-type="file" |
Данный тип валидации создан для валидации файлов. Важно! Мы не валидируем файлы по расширению! Для этого мы используем атрибут accept с перечисленными в нём допустимыми расширениями файлов. По умолчанию размер файла не ограничен. Для ограничения размера файла используйте у родителя дата атрибут data-max-size="1048576". В него вы записываете максимальный размер файла в байтах. В примере 1мб переведён в байты. |
|
data-validate-type="matrix" |
Валилируется по длине матрицы. Обязательно указывать матрицу data-matrix="____ ______" и ограничения ввода data-matrix-limitations="digit". |
|
data-validate-type="select" |
Валилируется на выбор как минимум одного пункта из списка |
|
data-validate-type="checkbox" |
Валилируется на checked, если чекбокс один то он должен быть чекнут |
|
data-validate-type="toggle-group" |
Валилируется группа из чекбоксов или радиокнопок на checked хотя бы одного элемента |
Так же в демо есть дополнительный кастомный тип валидации data-validate-type="custom-example". Он создан для примера что бы вы могли понять как добавлять новые типы валидации при необходимости.
Ограничения ввода data-limitation="любой из пяти допустимых", добавляются на родительский div инпута. Вы можете добавить свои собственные ограничения в конструкцию switch case при необходимости
|
data-limitation="digit" |
Доступен ввод только цифр |
|---|---|
|
data-limitation="letters" |
Доступен ввод только букв и пробела |
|
data-limitation="letters-and-digit" |
Доступен ввод только букв, цифр и пробела |
|
data-limitation="cyrillic" |
Доступен ввод только кирилицы и пробела |
|
data-limitation="latin" |
Доступен ввод только латинских букв и пробела |
Ограничения ввода data-matrix-limitation="любой из пяти допустимых", добавляются на родительский div инпута. Вы можете добавить свои собственные ограничения в конструкцию switch case при необходимости.
|
data-matrix-limitation="digit" |
Доступен ввод только цифр |
|---|---|
|
data-matrix-limitation="letters" |
Доступен ввод только букв и пробела |
|
data-matrix-limitation="letters-and-digit" |
Доступен ввод только букв, цифр и пробела |
|
data-matrix-limitation="cyrillic" |
Доступен ввод только кирилицы и пробела |
|
data-matrix-limitation="latin" |
Доступен ввод только латинских букв и пробела |
Ограничения ввода могут добавляться и не на обязательные для заполнения поля форм.
Матрица передаётся дата атрибутом data-matrix="__.__.____" обязательно указывать и второй атрибут data-matrix-limitations="любой из пяти допустимых". Нижние подчёркивание в матрице соответствует введённому с клавиатуры символу. То есть вместо нижнего подчёркивания будет вставляться введённый символ.
|
data-matrix="__.__.____" |
При вводе мы получим следующий результат 21.02.1982 |
|---|---|
|
data-matrix="____ ______" |
При вводе мы получим следующий результат 4234 234242 |
|
data-matrix="__-__-______" |
При вводе мы получим следующий результат 42-34-234242 |
Сообщения об ошибках и успехе записываются в дата атрибуты
|
data-message-base="Сообщение" |
Сообщение, при неуспешной валидации, для пустого поля. В случае отсутствия сообщение выводиться не будет. |
|---|---|
|
data-message-extra="Сообщение" |
Сообщение, при неуспешной валидации, для поля в котором введено что либо. В случае отсутствия будет выводиться сообщение data-message-base="Сообщение". |
|
data-message-succes="Сообщение" |
Сообщение, при успешной валидации. В случае отсутствия сообщение выводиться не будет. |
Важно! У кастомных инпутов тайп файл сообщения добавляются при создании экземпляра класса.
Так же, возможен вывод общей ошибки у формы. Для этого родителю нужно добавтьб ряд дата аттрибутов:
|
data-parent-validate="base" |
В данном дата аттрибуте указывается тип валидации у родителя, работает аналогично с типами валидации у инпутов. |
|---|---|
|
data-message-base="Сообщение" |
Сообщение, при неуспешной валидации, для формы. В случае отсутствия сообщение выводиться не будет. |
|
data-message-extra="Сообщение" |
Сообщение, при неуспешной валидации, для формы. В случае отсутствия будет выводиться сообщение data-message-base="Сообщение". |