Валидация

Получите мощные возможности проверки с помощью валидации форм HTML5 доступной во всех поддерживаемых браузерах по умолчанию или с использованием пользовательских стилей и JavaScript.

atelica.ru

Сеть отелей «Ателика». Всё включено!

На этой странице

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

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

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

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

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

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

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

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

html

<formclass="row g-3 needs-validation"novalidate><divclass="col-md-4"><labelfor="validationCustom01"class="form-label">Имя</label><inputtype="text"class="form-control"id="validationCustom01"value="Иван"required><divclass="valid-feedback"> Все хорошо!
</div></div><divclass="col-md-4"><labelfor="validationCustom02"class="form-label">Фамилия</label><inputtype="text"class="form-control"id="validationCustom02"value="Петров"required><divclass="valid-feedback"> Все хорошо!
</div></div><divclass="col-md-4"><labelfor="validationCustomUsername"class="form-label">Имя пользователя</label><divclass="input-group has-validation"><spanclass="input-group-text"id="inputGroupPrepend">@</span><inputtype="text"class="form-control"id="validationCustomUsername"aria-describedby="inputGroupPrepend"required><divclass="invalid-feedback"> Пожалуйста, выберите имя пользователя.
</div></div></div><divclass="col-md-6"><labelfor="validationCustom03"class="form-label">Город</label><inputtype="text"class="form-control"id="validationCustom03"required><divclass="invalid-feedback"> Укажите действующий город.
</div></div><divclass="col-md-3"><labelfor="validationCustom04"class="form-label">Область</label><selectclass="form-select"id="validationCustom04"required><optionselecteddisabledvalue="">Выберите...</option><option>...</option></select><divclass="invalid-feedback"> Пожалуйста, выберите корректный город.
</div></div><divclass="col-md-3"><labelfor="validationCustom05"class="form-label">Индекс</label><inputtype="text"class="form-control"id="validationCustom05"required><divclass="invalid-feedback"> Пожалуйста, предоставьте действующий почтовый индекс.
</div></div><divclass="col-12"><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="invalidCheck"required><labelclass="form-check-label"for="invalidCheck"> Примите условия и соглашения
</label><divclass="invalid-feedback"> Вы должны принять перед отправкой.
</div></div></div><divclass="col-12"><buttonclass="btn btn-primary"type="submit">Отправить форму</button></div></form>

// Example starter JavaScript for disabling form submissions if there are invalid fields
(()=>{'use strict'// Fetch all the forms we want to apply custom Bootstrap validation styles to
constforms=document.querySelectorAll('.needs-validation')// Loop over them and prevent submission
Array.from(forms).forEach(form=>{form.addEventListener('submit',event=>{if(!form.checkValidity()){event.preventDefault()event.stopPropagation()}form.classList.add('was-validated')},false)})})()

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

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

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

html

<formclass="row g-3"><divclass="col-md-4"><labelfor="validationDefault01"class="form-label">Имя</label><inputtype="text"class="form-control"id="validationDefault01"value="Иван"required></div><divclass="col-md-4"><labelfor="validationDefault02"class="form-label">Фамилия</label><inputtype="text"class="form-control"id="validationDefault02"value="Петров"required></div><divclass="col-md-4"><labelfor="validationDefaultUsername"class="form-label">Имя пользователя</label><divclass="input-group"><spanclass="input-group-text"id="inputGroupPrepend2">@</span><inputtype="text"class="form-control"id="validationDefaultUsername"aria-describedby="inputGroupPrepend2"required></div></div><divclass="col-md-6"><labelfor="validationDefault03"class="form-label">Город</label><inputtype="text"class="form-control"id="validationDefault03"required></div><divclass="col-md-3"><labelfor="validationDefault04"class="form-label">Область</label><selectclass="form-select"id="validationDefault04"required><optionselecteddisabledvalue="">Выберите...</option><option>...</option></select></div><divclass="col-md-3"><labelfor="validationDefault05"class="form-label">Индекс</label><inputtype="text"class="form-control"id="validationDefault05"required></div><divclass="col-12"><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="invalidCheck2"required><labelclass="form-check-label"for="invalidCheck2"> Примите условия и соглашения
</label></div></div><divclass="col-12"><buttonclass="btn btn-primary"type="submit">Отправить форму</button></div></form>

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

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

Для недопустимых полей убедитесь, что недопустимая обратная связь/сообщение об ошибке связано с соответствующим полем формы с помощью aria-describedby (отмечая, что этот атрибут позволяет ссылаться на более чем один id, в случае если поле уже указывает на дополнительную форму текст).

Чтобы исправить проблемы с радиусами границ, для групп ввода требуется дополнительный класс .has-validation.

html

<formclass="row g-3"><divclass="col-md-4"><labelfor="validationServer01"class="form-label">Имя</label><inputtype="text"class="form-control is-valid"id="validationServer01"value="Иван"required><divclass="valid-feedback"> Все хорошо!
</div></div><divclass="col-md-4"><labelfor="validationServer02"class="form-label">Фамилия</label><inputtype="text"class="form-control is-valid"id="validationServer02"value="Петров"required><divclass="valid-feedback"> Все хорошо!
</div></div><divclass="col-md-4"><labelfor="validationServerUsername"class="form-label">Имя пользователя</label><divclass="input-group has-validation"><spanclass="input-group-text"id="inputGroupPrepend3">@</span><inputtype="text"class="form-control is-invalid"id="validationServerUsername"aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback"required><divid="validationServerUsernameFeedback"class="invalid-feedback"> Пожалуйста, выберите имя пользователя.
</div></div></div><divclass="col-md-6"><labelfor="validationServer03"class="form-label">Город</label><inputtype="text"class="form-control is-invalid"id="validationServer03"aria-describedby="validationServer03Feedback"required><divid="validationServer03Feedback"class="invalid-feedback"> Укажите действующий город.
</div></div><divclass="col-md-3"><labelfor="validationServer04"class="form-label">Область</label><selectclass="form-select is-invalid"id="validationServer04"aria-describedby="validationServer04Feedback"required><optionselecteddisabledvalue="">Выберите...</option><option>...</option></select><divid="validationServer04Feedback"class="invalid-feedback"> Пожалуйста, выберите корректный город.
</div></div><divclass="col-md-3"><labelfor="validationServer05"class="form-label">Индекс</label><inputtype="text"class="form-control is-invalid"id="validationServer05"aria-describedby="validationServer05Feedback"required><divid="validationServer05Feedback"class="invalid-feedback"> Пожалуйста, предоставьте действующий почтовый индекс.
</div></div><divclass="col-12"><divclass="form-check"><inputclass="form-check-input is-invalid"type="checkbox"value=""id="invalidCheck3"aria-describedby="invalidCheck3Feedback"required><labelclass="form-check-label"for="invalidCheck3"> Примите условия и соглашения
</label><divid="invalidCheck3Feedback"class="invalid-feedback"> Вы должны принять перед отправкой.
</div></div></div><divclass="col-12"><buttonclass="btn btn-primary"type="submit">Отправить форму</button></div></form>

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

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

<input> и <textarea> с .form-control (включая .form-control в группе ввода)
<select> с .form-select
.form-check

html

<formclass="was-validated"><divclass="mb-3"><labelfor="validationTextarea"class="form-label">Текстовое поле</label><textareaclass="form-control"id="validationTextarea"placeholder="Обязательный пример текстового поля"required></textarea><divclass="invalid-feedback"> Пожалуйста, введите сообщение в текстовое поле.
</div></div><divclass="form-check mb-3"><inputtype="checkbox"class="form-check-input"id="validationFormCheck1"required><labelclass="form-check-label"for="validationFormCheck1">Отметьте этот флажок</label><divclass="invalid-feedback">Пример неверного текста обратной связи</div></div><divclass="form-check"><inputtype="radio"class="form-check-input"id="validationFormCheck2"name="radio-stacked"required><labelclass="form-check-label"for="validationFormCheck2">Переключить это радио</label></div><divclass="form-check mb-3"><inputtype="radio"class="form-check-input"id="validationFormCheck3"name="radio-stacked"required><labelclass="form-check-label"for="validationFormCheck3">Или переключить это другое радио</label><divclass="invalid-feedback">Еще пример неверного текста обратной связи</div></div><divclass="mb-3"><selectclass="form-select"requiredaria-label="select example"><optionvalue="">Откройте это меню выбора</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select><divclass="invalid-feedback">Пример обратной связи неверного выбора </div></div><divclass="mb-3"><inputtype="file"class="form-control"aria-label="file example"required><divclass="invalid-feedback">Пример обратной связи неверной формы выбора файла</div></div><divclass="mb-3"><buttonclass="btn btn-primary"type="submit"disabled>Отправить форму</button></div></form>

Всплывающие подсказки

Если Ваш макет формы позволяет это, Вы можете заменить классы .{valid|invalid}-feedback на классы .{valid|invalid}-tooltip , чтобы отображать отзывы о проверке в стилизованной всплывающей подсказке. Убедитесь, что у Вас есть родительский элемент с position: relative для позиционирования всплывающей подсказки. В приведенном ниже примере у наших классов столбцов это уже есть, но для Вашего проекта может потребоваться альтернативная настройка.

html

<formclass="row g-3 needs-validation"novalidate><divclass="col-md-4 position-relative"><labelfor="validationTooltip01"class="form-label">Имя</label><inputtype="text"class="form-control"id="validationTooltip01"value="Иван"required><divclass="valid-tooltip"> Все хорошо!
</div></div><divclass="col-md-4 position-relative"><labelfor="validationTooltip02"class="form-label">Фамилия</label><inputtype="text"class="form-control"id="validationTooltip02"value="Петров"required><divclass="valid-tooltip"> Все хорошо!
</div></div><divclass="col-md-4 position-relative"><labelfor="validationTooltipUsername"class="form-label">Имя пользователя</label><divclass="input-group has-validation"><spanclass="input-group-text"id="validationTooltipUsernamePrepend">@</span><inputtype="text"class="form-control"id="validationTooltipUsername"aria-describedby="validationTooltipUsernamePrepend"required><divclass="invalid-tooltip"> Пожалуйста, выберите уникальное и действительное имя пользователя.
</div></div></div><divclass="col-md-6 position-relative"><labelfor="validationTooltip03"class="form-label">Город</label><inputtype="text"class="form-control"id="validationTooltip03"required><divclass="invalid-tooltip"> Укажите действующий город.
</div></div><divclass="col-md-3 position-relative"><labelfor="validationTooltip04"class="form-label">Область</label><selectclass="form-select"id="validationTooltip04"required><optionselecteddisabledvalue="">Выберите...</option><option>...</option></select><divclass="invalid-tooltip"> Пожалуйста, выберите корректный город.
</div></div><divclass="col-md-3 position-relative"><labelfor="validationTooltip05"class="form-label">Индекс</label><inputtype="text"class="form-control"id="validationTooltip05"required><divclass="invalid-tooltip"> Пожалуйста, предоставьте действующий почтовый индекс.
</div></div><divclass="col-12"><buttonclass="btn btn-primary"type="submit">Отправить форму</button></div></form>

CSS

Переменные

Добавлено в версии 5.3.0

В рамках развивающегося подхода Bootstrap к переменным CSS формы теперь используют локальные переменные CSS для проверки для расширенной настройки в реальном времени. Значения переменных CSS задаются через Sass, поэтому настройка Sass по-прежнему поддерживается.

scss/_root.scss

--#{$prefix}form-valid-color:#{$form-valid-color};--#{$prefix}form-valid-border-color:#{$form-valid-border-color};--#{$prefix}form-invalid-color:#{$form-invalid-color};--#{$prefix}form-invalid-border-color:#{$form-invalid-border-color};

Эти переменные также адаптируются к цветовому режиму, то есть они меняют цвет в темном режиме.

Sass переменные

scss/_variables.scss

$form-feedback-margin-top:$form-text-margin-top;$form-feedback-font-size:$form-text-font-size;$form-feedback-font-style:$form-text-font-style;$form-feedback-valid-color:$success;$form-feedback-invalid-color:$danger;$form-feedback-icon-valid-color:$form-feedback-valid-color;$form-feedback-icon-valid:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");$form-feedback-icon-invalid-color:$form-feedback-invalid-color;$form-feedback-icon-invalid:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>");

scss/_variables.scss

$form-valid-color:$form-feedback-valid-color;$form-valid-border-color:$form-feedback-valid-color;$form-invalid-color:$form-feedback-invalid-color;$form-invalid-border-color:$form-feedback-invalid-color;

scss/_variables-dark.scss

$form-valid-color-dark:$green-300;$form-valid-border-color-dark:$green-300;$form-invalid-color-dark:$red-300;$form-invalid-border-color-dark:$red-300;

Sass миксины

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

scss/mixins/_forms.scss

@mixin form-validation-state-selector($state){@if($state=="valid"or$state=="invalid"){.was-validated#{if(&,"&","")}:#{$state},#{if(&,"&","")}.is-#{$state}{@content;}}@else{#{if(&,"&","")}.is-#{$state}{@content;}}}@mixin form-validation-state($state,$color,$icon,$tooltip-color:color-contrast($color),$tooltip-bg-color:rgba($color,$form-feedback-tooltip-opacity),$focus-box-shadow:00$input-btn-focus-blur$input-focus-widthrgba($color,$input-btn-focus-color-opacity),$border-color:$color){.#{$state}-feedback{display:none;width:100%;margin-top:$form-feedback-margin-top;@include font-size($form-feedback-font-size);font-style:$form-feedback-font-style;color:$color;}.#{$state}-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;// Contain to parent when possible
padding:$form-feedback-tooltip-padding-y$form-feedback-tooltip-padding-x;margin-top:.1rem;@include font-size($form-feedback-tooltip-font-size);line-height:$form-feedback-tooltip-line-height;color:$tooltip-color;background-color:$tooltip-bg-color;@include border-radius($form-feedback-tooltip-border-radius);}@include form-validation-state-selector($state){~.#{$state}-feedback,~.#{$state}-tooltip{display:block;}}.form-control{@include form-validation-state-selector($state){border-color:$border-color;@if$enable-validation-icons{padding-right:$input-height-inner;background-image:escape-svg($icon);background-repeat:no-repeat;background-position:right$input-height-inner-quartercenter;background-size:$input-height-inner-half$input-height-inner-half;}&:focus{border-color:$border-color;box-shadow:$focus-box-shadow;}}}// stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control{@include form-validation-state-selector($state){@if$enable-validation-icons{padding-right:$input-height-inner;background-position:top$input-height-inner-quarterright$input-height-inner-quarter;}}}.form-select{@include form-validation-state-selector($state){border-color:$border-color;@if$enable-validation-icons{&:not([multiple]):not([size]),&:not([multiple])[size="1"]{--#{$prefix}form-select-bg-icon:#{escape-svg($icon)};padding-right:$form-select-feedback-icon-padding-end;background-position:$form-select-bg-position,$form-select-feedback-icon-position;background-size:$form-select-bg-size,$form-select-feedback-icon-size;}}&:focus{border-color:$border-color;box-shadow:$focus-box-shadow;}}}.form-control-color{@include form-validation-state-selector($state){@if$enable-validation-icons{width:add($form-color-width,$input-height-inner);}}}.form-check-input{@include form-validation-state-selector($state){border-color:$border-color;&:checked{background-color:$color;}&:focus{box-shadow:$focus-box-shadow;}~.form-check-label{color:$color;}}}.form-check-inline.form-check-input{~.#{$state}-feedback{margin-left:.5em;}}.input-group{>.form-control:not(:focus),>.form-select:not(:focus),>.form-floating:not(:focus-within){@include form-validation-state-selector($state){@if$state=="valid"{z-index:3;}@else if$state=="invalid"{z-index:4;}}}}}

Sass карта

Это карта валидации Sass из _variables.scss. Переопределите или расширьте это, чтобы создать другие или дополнительные состояния.

scss/_variables.scss

$form-validation-states:("valid":("color":var(--#{$prefix}form-valid-color),"icon":$form-feedback-icon-valid,"tooltip-color":#fff,"tooltip-bg-color":var(--#{$prefix}success),"focus-box-shadow":00$input-btn-focus-blur$input-focus-widthrgba(var(--#{$prefix}success-rgb),$input-btn-focus-color-opacity),"border-color":var(--#{$prefix}form-valid-border-color),),"invalid":("color":var(--#{$prefix}form-invalid-color),"icon":$form-feedback-icon-invalid,"tooltip-color":#fff,"tooltip-bg-color":var(--#{$prefix}danger),"focus-box-shadow":00$input-btn-focus-blur$input-focus-widthrgba(var(--#{$prefix}danger-rgb),$input-btn-focus-color-opacity),"border-color":var(--#{$prefix}form-invalid-border-color),));

Карты $form-validation-states могут содержать три необязательных параметра для переопределения всплывающих подсказок и стилей фокуса.

Sass цикл

Используется для перебора значений карты $form-validation-states для генерации наших стилей проверки. Любые изменения в приведенной выше карте Sass будут отражены в Вашем скомпилированном CSS через этот цикл.

scss/forms/_validation.scss

@each$state,$datain$form-validation-states{@include form-validation-state($state,$data...);}

Кастомизация

Состояния проверки можно настроить через Sass с помощью карты $form-validation-states. Эта карта Sass, расположенная в нашем файле _variables.scss, используется для генерации состояний валидации по умолчанию valid/invalid. ключена вложенная карта для настройки цвета каждого состояния, иконки, цвета всплывающей подсказки и тени фокуса. Хотя браузеры не поддерживают никакие другие состояния, те, кто использует собственные стили, могут легко добавить более сложную обратную связь с формой.