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

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

Очень часто перед отправкой формы, требуется произвести ее проверку. Фреймворк 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] |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v2-0-0.pipui.ru/components/form-validators.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.