Валидатор форм
Очень часто перед отправкой формы, требуется произвести ее проверку на корректность заполнения полей в ней и для этого в фреймворке 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>
Вы можете управлять стилем появляющейся подсказки с помощью атрибута [data-formvalidator-type], который может принимать значения: warning, danger, info, success
Атрибут [data-formvalidator-text] принимает в качестве значения тект, который будет выводится в оповещении в случает некорректного заполнения поля