Валидация

validation

В SIMAI Framework с помощью модификаторов можно костомизировать элементы форм при валидации

Как это работает

Вот как проверка формы работает:

Проверка формы HTML осуществляется с помощью двух псевдоклассов CSS, :invalid и :valid. Он применяется к элементам <input>, <select> и <textarea>
SimaiFramework ограничивает стили :invalid и :valid родительским модификатором was-validated, обычно применяемым к <form>. В противном случае любое обязательное поле без значения отображается как недействительное при загрузке страницы. Таким образом, вы можете выбрать, когда их активировать (обычно после попытки отправки формы)
Чтобы сбросить внешний вид формы (например, в случае динамической отправки формы с использованием AJAX), снова удалите модификатор was-validated из <form> после отправки.
В качестве запасного варианта можно использовать класса is-invalid и is-valid вместо псевдоклассов для проверки на стороне сервера. Для них не требуется родительский класс с проверкой was.
Из-за ограничений в том, как работает CSS, мы не можем (в настоящее время) применять стили к <label>, который стоит перед элементом управления формой в DOM, без помощи пользовательского JavaScript.
Все современные браузеры поддерживают API проверки ограничений, набор методов JavaScript для проверки элементов управления формы.
Сообщения обратной связи могут использовать настройки браузера по умолчанию (разные для каждого браузера и не настраиваемые с помощью CSS) или наши пользовательские стили обратной связи с дополнительными HTML и CSS.
Вы можете предоставить настраиваемые сообщения о проверке с помощью setCustomValidity в JavaScript.

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

Пользовательские стили

Для настраиваемых сообщений проверки формы вам необходимо добавить логический атрибут novalidate к вашему <form>. Это отключает всплывающие подсказки браузера по умолчанию, но по-прежнему предоставляет доступ к API проверки формы в JavaScript. Попробуйте отправить форму ниже; наш JavaScript перехватит кнопку отправки и передаст вам отзыв. При попытке отправки вы увидите стили :invalid и :valid, примененные к вашим элементам управления формой.

Пользовательские стили отзывов применяют настраиваемые цвета, границы, стили фокуса и фоновые значки, чтобы лучше передавать отзывы. Фоновые значки для <select> доступны только с form-select, но не с form-control.

Имя

Фамилия

Имя пользователя

Город

Страна

Индекс

Согласен с условиями

<form class="grid grid-col-12 gap-1 needs-validation" novalidate>
    <div class="col-span-4">
        <label for="validationCustom01" class="inline-block m-bottom-1/3">Имя</label>
        <input type="text" class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest" id="validationCustom01" value="Иван" required>
        <div class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-green">
            Хорошо выглядит!
        </div>
    </div>
    <div class="col-span-4">
        <label for="validationCustom02" class="inline-block m-bottom-1/3">Фамилия</label>
        <input type="text" class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest" id="validationCustom02" value="Сидоров" required>
        <div class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-green">
            Хорошо выглядит!
        </div>
    </div>
    <div class="col-span-4">
        <label for="validationCustomUsername" class="inline-block m-bottom-1/3">Имя пользователя</label>
        <div class="flex flex-wrap items-cross-stretch w-full">
            <span class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-left-1/3 border-left-1" id="inputGroupPrepend">@</span>
            <input type="text" class="w-px grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding border-top-1 border-bottom-1 border-surface-container color-on-surface bg-surface-0 p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-right-1/3 border-right-1" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
            <div class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-red">
                Пожалуйста, выберите имя пользователя.
            </div>
        </div>
    </div>
    <div class="col-span-5">
        <label for="validationCustom03" class="inline-block m-bottom-1/3">Город</label>
        <input type="text" class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest" id="validationCustom03" required>
        <div class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-red">
            Укажите действительный город.
        </div>
    </div>
    <div class="col-span-4">
        <label for="validationCustom04" class="inline-block m-bottom-1/3">Страна</label>
        <select class="w-full block weight-4 appearance-none transition p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest bg-origin-padding bg-arrow-down bg-right-b2 bg-repeat-none" id="validationCustom04" required>
            <option selected disabled value="">Выберите...</option>
            <option>...</option>
        </select>
        <div class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-red">
            Пожалуйста, выберите существующую страну
        </div>
    </div>
    <div class="col-span-3">
        <label for="validationCustom05" class="inline-block m-bottom-1/3">Индекс</label>
        <input type="text" class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest" id="validationCustom05" required>
        <div class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-red">
            Пожалуйста, выберите существующий индекс.
        </div>
    </div>
    <div class="col-span-12">
        <div class="flex items-cross-center flex-wrap">
            <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-green checked:b-green checked:bg-check indeterminate:bg-dash indeterminate:b-blue indeterminate:bg-green" type="checkbox" value="" id="invalidCheck" required>
            <label class="inline-block m-left-1/3 color-inherit string-none" for="invalidCheck">
                Согласен с условиями
            </label>
            <div class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-red">
                Вы должны согласиться перед отправкой
            </div>
        </div>
    </div>
    <div class="col-span-12">
        <button class="p-right-1 p-left-1 p-top-1/3 p-bottom-1/3 bg-error hover:bg-surface-0 border-1 border-error transition-all text-1 radius-1/3 color-on-surface-inverse hover:color-on-surface cursor-pointer" type="submit">Отправить форму</button>
    </div>
</form>

Проверка по умолчанию на стороне браузера

Не заинтересованы в настраиваемых сообщениях обратной связи проверки или написании JavaScript для изменения поведения формы? Все хорошо, вы можете использовать настройки браузера по умолчанию. Попробуйте отправить форму ниже. В зависимости от вашего браузера и ОС вы увидите немного другой стиль обратной связи.

Хотя эти стили обратной связи нельзя настроить с помощью CSS, вы все равно можете настроить текст обратной связи с помощью JavaScript.

<form class="grid grid-col-12 gap-1">
    <div class="col-span-4">
        <label for="validationDefault01" class="inline-block m-bottom-1/3">Имя</label>
        <input type="text" class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest" id="validationDefault01" value="Иван" required>
    </div>
    <div class="col-span-4">
        <label for="validationDefault02" class="inline-block m-bottom-1/3">Фамилия</label>
        <input type="text" class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest" id="validationDefault02" value="Сидоров" required>
    </div>
    <div class="col-span-4">
        <label for="validationDefaultUsername" class="inline-block m-bottom-1/3">Имя пользователя</label>
        <div class="flex flex-wrap items-cross-stretch w-full">
            <span class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-left-1/3 border-left-1" id="inputGroupPrepend2">@</span>
            <input type="text" class="w-px grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding border-top-1 border-bottom-1 border-surface-container color-on-surface bg-surface-0 p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-right-1/3 border-right-1" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
        </div>
    </div>
    <div class="col-span-6">
        <label for="validationDefault03" class="inline-block m-bottom-1/3">Город</label>
        <input type="text" class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest" id="validationDefault03" required>
    </div>
    <div class="col-span-3">
        <label for="validationDefault04" class="inline-block m-bottom-1/3">Страна</label>
        <select class="w-full block weight-4 appearance-none transition p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest bg-origin-padding bg-arrow-down bg-right-b2 bg-repeat-none" id="validationDefault04" required>
            <option selected disabled value="">Выберите...</option>
            <option>...</option>
        </select>
    </div>
    <div class="col-span-3">
        <label for="validationDefault05" class="inline-block m-bottom-1/3">Индекс</label>
        <input type="text" class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest" id="validationDefault05" required>
    </div>
    <div class="col-span-12">
        <div class="flex items-cross-center flex-wrap">
            <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-green checked:b-green checked:bg-check indeterminate:bg-dash indeterminate:b-blue indeterminate:bg-green" type="checkbox" value="" id="invalidCheck2" required>
            <label class="inline-block m-left-1/3 color-inherit string-none" for="invalidCheck2">
                Согласен с условиями
            </label>
        </div>
    </div>
    <div class="col-span-12">
        <button class="p-right-1 p-left-1 p-top-1/3 p-bottom-1/3 bg-error hover:bg-surface-0 border-1 border-error transition-all text-1 radius-1/3 color-on-surface-inverse hover:color-on-surface cursor-pointer" type="submit">Отправить форму</button>
    </div>
</form>

Проверка на стороне сервера

Мы рекомендуем использовать проверку на стороне клиента, но если вам требуется проверка на стороне сервера, вы можете указать недопустимые и действительные поля формы с помощью is-invalid и is-valid. Обратите внимание, что invalid-feedback также поддерживается этими классами.

Имя

Фамилия

Имя пользователя

Город

Страна

Индекс

Согласен с условиями

<form class="grid grid-col-12 gap-1">
    <div class="col-span-4">
        <label for="validationServer01" class="inline-block m-bottom-1/3">Имя</label>
        <input type="text" class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest valid:b-green valid:bg-check valid:pr-c8 bg-repeat-none bg-right-b6 bg-size-b4 valid:hidden+block" id="validationServer01" value="Иван" required>
        <div class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-green">
            Правильно!
        </div>
    </div>
    <div class="col-span-4">
        <label for="validationServer02" class="inline-block m-bottom-1/3">Фамилия</label>
        <input type="text" class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest valid:b-green valid:bg-check valid:pr-c8 bg-repeat-none bg-right-b6 bg-size-b4 valid:hidden+block" id="validationServer02" value="Сидоров" required>
        <div class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-green">
            Правильно!
        </div>
    </div>
    <div class="col-span-4">
        <label for="validationServerUsername" class="inline-block m-bottom-1/3">Имя пользователя</label>
        <div class="flex flex-wrap items-cross-stretch w-full">
            <span class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-left-1/3 border-left-1" id="inputGroupPrepend3">@</span>
            <input type="text" class="w-px grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding border-1 border-surface-container invalid:bg-warning-circle invalid:b-red p-right-1 bg-repeat-none bg-right-b6 bg-size-c0 invalid:hidden+block radius-right-1/3" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
            <div id="validationServerUsernameFeedback" class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-red">
                Пожалуйста, введите имя пользователя.
            </div>
        </div>
    </div>
    <div class="col-span-6">
        <label for="validationServer03" class="inline-block m-bottom-1/3">Город</label>
        <input type="text" class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest invalid:bg-warning-circle invalid:b-red p-right-1 bg-repeat-none bg-right-b6 bg-size-c0 invalid:hidden+block" id="validationServer03" aria-describedby="validationServer03Feedback" required>
        <div id="validationServer03Feedback" class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-red">
            Пожалуйста, введите город.
        </div>
    </div>
    <div class="col-span-3">
        <label for="validationServer04" class="inline-block m-bottom-1/3">Страна</label>
        <select class="w-full block weight-4 appearance-none transition p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest bg-origin-padding bg-arrow-down bg-right-b2 bg-repeat-none invalid:bg-warning-circle invalid:b-red p-right-1 bg-repeat-none bg-right-b6 bg-size-c0 invalid:hidden+block valid:b-green valid:bg-check valid:pr-c8 bg-repeat-none bg-right-b6 bg-size-b4" id="validationServer04" aria-describedby="validationServer04Feedback" required>
            <option selected disabled value="">Выберите...</option>
            <option>...</option>
        </select>
        <div id="validationServer04Feedback" class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-red">
            Выберите страну из списка.
        </div>
    </div>
    <div class="col-span-3">
        <label for="validationServer05" class="inline-block m-bottom-1/3">Индекс</label>
        <input type="text" class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest invalid:bg-warning-circle invalid:b-red p-right-1 bg-repeat-none bg-right-b6 bg-size-c0 invalid:hidden+block" id="validationServer05" aria-describedby="validationServer05Feedback" required>
        <div id="validationServer05Feedback" class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-red">
            Пожалуйста, введите индекс.
        </div>
    </div>
    <div class="col-span-12">
        <div class="flex items-cross-center flex-wrap">
            <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-green checked:b-green checked:bg-check indeterminate:bg-dash indeterminate:b-blue indeterminate:bg-green invalid:hidden~block invalid:b-red invalid:c-inherit~c-red valid:c-inherit~c-green valid:b-green valid:c-green" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
            <label class="inline-block m-left-1/3 color-inherit string-none" for="invalidCheck3">
                Согласен с условиями
            </label>
            <div id="invalidCheck3Feedback" class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-red">
                Вы должны согласиться перед отправкой.
            </div>
        </div>
    </div>
    <div class="col-span-12">
        <button class="p-right-1 p-left-1 p-top-1/3 p-bottom-1/3 bg-error hover:bg-surface-0 border-1 border-error transition-all text-1 radius-1/3 color-on-surface-inverse hover:color-on-surface cursor-pointer" type="submit">Отправить форму</button>
    </div>
</form>

Поддерживаемые элементы форм

Стили проверки доступны для следующих элементов управления и компонентов формы:

<input> и <textarea> с модификатором form-control (включая до одного form-control в группах ввода)
<select> с модификатором form-select
модификатор form-check

Текстовое поле

Установите флажок

Включите радиокнопку

Или переключите на эту радиокнопку

<form>
    <div class="m-bottom-1">
        <label for="validationTextarea" class="inline-block m-bottom-1/3">Текстовое поле</label>
        <textarea class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest invalid:bg-warning-circle invalid:b-red p-right-1 bg-repeat-none bg-right-b6 bg-size-c0 invalid:hidden+block" id="validationTextarea" placeholder="Обязательное поле" required></textarea>
        <div class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-red">
            Пожалуйста, введите сообщение в текстовое поле
        </div>
    </div>
    <div class="flex items-cross-center flex-wrap m-bottom-1">
        <input type="checkbox" class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-green checked:b-green checked:bg-check indeterminate:bg-dash indeterminate:b-blue indeterminate:bg-green invalid:hidden~block invalid:b-red invalid:c-inherit~c-red valid:c-inherit~c-green valid:b-green valid:c-green" id="validationFormCheck1" required>
        <label class="inline-block m-left-1/3 color-inherit string-none" for="validationFormCheck1">Установите флажок</label>
        <div class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-red">
            Пример неправильного введенного текста
        </div>
    </div>
    <div class="flex items-cross-center flex-wrap m-bottom-1/3">
        <input type="radio" class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-green checked:b-green checked:bg-circle invalid:hidden~block invalid:b-red invalid:c-inherit~c-red valid:c-inherit~c-green valid:b-green valid:c-green radius-full" id="validationFormCheck2" name="radio-stacked" required>
        <label class="inline-block m-left-1/3 color-inherit string-none" for="validationFormCheck2">Включите радиокнопку</label>
    </div>
    <div class="flex items-cross-center flex-wrap m-bottom-1">
        <input type="radio" class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-green checked:b-green checked:bg-circle invalid:hidden~block invalid:b-red invalid:c-inherit~c-red valid:c-inherit~c-green valid:b-green valid:c-green radius-full" id="validationFormCheck3" name="radio-stacked" required>
        <label class="inline-block m-left-1/3 color-inherit string-none" for="validationFormCheck3">Или переключите на эту радиокнопку</label>
        <div class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-red">
            Еще один пример неправильного ввода текста
        </div>
    </div>
    <div class="m-bottom-1">
        <select class="w-full block weight-4 appearance-none transition p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest bg-origin-padding bg-arrow-down bg-right-b2 bg-repeat-none invalid:bg-warning-circle invalid:b-red p-right-1 bg-repeat-none bg-right-b6 bg-size-c0 invalid:hidden+block valid:b-green valid:bg-check valid:pr-c8 bg-repeat-none bg-right-b6 bg-size-b4" required aria-label="select example">
            <option value="">Раскрывающийся список</option>
            <option value="1">Один</option>
            <option value="2">Два</option>
            <option value="3">Три</option>
        </select>
        <div class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-red">
            Пример неправильного выбора
        </div>
    </div>
    <div class="m-bottom-1">
        <input type="file" class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest file-selector-button:font-inherit file-selector-button:t-inherit file-selector-button:bg-surface-2 file-selector-button:c-inherit file-selector-button:b-end-1 file-selector-button:b-inherit file-selector-button:b-solid file-selector-button:r-0 file-selector-button:b-0 file-selector-button:pointer-event-none file-selector-button:m-end-2 file-selector-button:-my-1 file-selector-button:-mx-2 file-selector-button:p-top-1/3 p-bottom-1/3 file-selector-button:p-right-1/2 p-left-1/2 cursor-pointer hover:file-selector-button:bg-surface-1 file-selector-button:transition invalid:bg-warning-circle invalid:b-red p-right-1 bg-repeat-none bg-right-b6 bg-size-c0 invalid:hidden+block" aria-label="Пример выбора файла" required>
        <div class="hidden w-full m-top-1/3 text-1/2 string-1/3 color-red">
            Пример ввода неверного файла
        </div>
    </div>
    <div class="m-bottom-1">
        <button class="p-right-1 p-left-1 p-top-1/3 p-bottom-1/3 bg-error hover:bg-surface-0 border-1 border-error transition-all text-1 radius-1/3 color-on-surface-inverse hover:color-on-surface cursor-pointer" type="submit" disabled>Отправить форму</button>
    </div>
</form>

Адаптивность

Для установки адаптивности элементов формы, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью