Валидаторы форм

Общая информация

Очень часто перед отправкой формы, требуется произвести ее проверку. Фреймворк PipUI даёт такую возможность.

Для работы компонента, необходимо задать элементам формы атрибут data-validator. Все эти элементы должна находится внутри контейнера .input-block, которые в свою очередь должны быть внутри form.

Разметка

<form novalidate>
        <div class="input-block">
            <input type="text" data-validator placeholder=".input:required" required class="input">
        </div>

        <div class="input-block pt-20">
            <input type="text" data-validator placeholder=".input[pattern='^[a-z0-9]+']" pattern="^[a-z0-9]+$" class="input">
        </div>

        <div class="pt-20"><button type="submit" class="btn">Send</button></div>
</form>

Пример работы кода выше

Вы можете управлять стилем появляющейся подсказки с помощью атрибута [data-validator-type], который может принимать любые значения. Атрибут [data-validator-text] принимает в качестве значения текст, который будет выводится в оповещении в случает некорректного заполнения поля.

Javascript

Вы можете произвести инстализацию вручную. Каждый элемент инстализируется отдельно.

Инициализация

Для этого вам необходимо создать экземпляр класса PipUI.Validator и передать в него селектор элемента формы.

Второй параметр данного класса отвечает за объект опций.

<div class="navbar" id="navbar">...</div>

<script>
    let validator = new PipUI.Validator('#navbar');
</script>

Опции

// Выводить в консоль отладку
debug: false

// Текст, выводимый валидатором в случае ошибки
text: ''

// Значение атрибута data-validator-type для стилизации
type: 'default'

// Функция обратного вызова, выполняемая при обнаружении ошибки валидации формы
invalidCallback: undefined

// Шаблоны валидатора
templates: {...}

Методы

let validator = new PipUI.Validator('#myform');

validator.getID() // Вернет уникальный идентификатор панели

validator.setOptions(object) // Изменить опции панели

validator.getOptions() // Получить опции панели

validator.isValid() // Проверить валидна ли форма

// Произвести полную проверку валидности формы с учетом вывода сообщения
// Параметр callback является приоритетной функцией, если аналогичная задана через
// опцию invalidCallback
validator.validate(callback)

События

Триггер	Описание	Инициатор
validate-validator-pipui	Срабатывает при полной валидации формы	[data-validator]