> For the complete documentation index, see [llms.txt](https://v2-0-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v2-0-0.pipui.ru/components/form-validators.md).

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

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

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

Для работы компонента, необходимо задать элементам формы атрибут <mark style="color:orange;">`data-validator`</mark>. Все эти элементы должна находится внутри контейнера <mark style="color:orange;">`.input-block`</mark>, которые в свою очередь должны быть внутри <mark style="color:orange;">`form`</mark>.

### Разметка <a href="#markup" id="markup"></a>

```html
<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>
```

{% embed url="<https://codepen.io/pipui/pen/MWPYBQJ>" %}
Пример работы кода выше
{% endembed %}

Вы можете управлять стилем появляющейся подсказки с помощью атрибута\ <mark style="color:orange;">`[data-validator-type]`</mark>, который может принимать любые значения.\
Атрибут <mark style="color:orange;">`[data-validator-text]`</mark> принимает в качестве значения текст, который будет выводится в оповещении в случает некорректного заполнения поля.

## Javascript

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

### Инициализация <a href="#init" id="init"></a>

Для этого вам необходимо создать экземпляр класса <mark style="color:orange;">`PipUI.Validator`</mark> и передать в него селектор элемента формы.

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

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

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

### Опции <a href="#options" id="options"></a>

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

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

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

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

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

### Методы <a href="#methods" id="methods"></a>

```javascript
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] |