PipUI v1.6.0
  • 🌟Введиние
  • 🗃️Скачать
  • ⚠️Начало работы
  • Компоненты
    • Базовый набор
    • Отступы
    • Палитра цветов
    • Grid сетка
    • Панель навигации
    • Выпадающее меню
    • Постраничная навигация
    • Формы
    • Кнопки
    • Полосы прогресса
    • Меню навигации
    • Модальные окна
    • Оповещения
    • Подтверждения действий
    • Вкладки
    • Хлебные крошки
    • Спойлеры
    • Таблицы
    • Панель BB-кодов
    • BB-коды
    • Валидаторы форм
    • Индексы полей ввода
    • Всплывающие подсказки
    • Подсвечивающиеся блоки
    • Всплывающие блоки
    • Слайдер
    • Автозаполнение
    • Селектор тегов
    • Блоки оповещений
    • Селекторы даты и времени
    • Якоря
  • 📧Контакты
  • 🔁GitHub
Powered by GitBook
On this page
  1. Компоненты

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

PreviousBB-кодыNextИндексы полей ввода

Last updated 2 years ago

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

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

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