> For the complete documentation index, see [llms.txt](https://v1-6-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://v1-6-0.pipui.ru/components/form-validators.md).

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

Очень часто перед отправкой формы, требуется произвести ее проверку на корректность заполнения полей в ней и для этого в фреймворке PipUI есть соответствующий компонент.

```html
<form method="post" class="p-20 rad-2 bg-gray-200" novalidate data-formvalidator>
    <div>
        <input type="text" name="name" class="mb-0" data-formvalidator-text="Поле является обязательным для заполнения" required placeholder="required">
    </div>

    <div class="pt-20">
        <input type="text" name="name" data-formvalidator-type="danger" class="mb-0" data-formvalidator-text="Данное поле является обязательным и принимает только цифры" required pattern="^\d+$" placeholder="Цифры">
    </div>

    <div class="pt-20 text-center">
        <button type="submit" class="btn">Отправить</button>
    </div>
</form>
```

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

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