Bootstrap Validation (валидация)

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

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

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

Вот как работает проверка формы с 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> который находится перед элементом управления form в DOM без помощи пользовательского JavaScript.
  • Все современные браузеры поддерживают constraint validation API, серию методов JavaScript для проверки элементов управления формами.
  • В сообщениях обратной связи могут использоваться настройки браузера по умолчанию (разные для каждого браузера и нестилируемые с помощью CSS) или наши пользовательские стили обратной связи с дополнительными HTML и CSS.
  • Вы можете предоставлять пользовательские сообщения о достоверности с помощью setCustomValidity в JavaScript.

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

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

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

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

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="validationCustom01" class="form-label">Имя</label>
    <input type="text" class="form-control" id="validationCustom01" value="Марк" required>
    <div class="valid-feedback">
      Выглядит неплохо!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustom02" class="form-label">Фамилия</label>
    <input type="text" class="form-control" id="validationCustom02" value="Отто" required>
    <div class="valid-feedback">
      Выглядит неплохо!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustomUsername" class="form-label">Имя пользователя</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend">@</span>
      <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
      <div class="invalid-feedback">
        Пожалуйста, выберите имя пользователя.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationCustom03" class="form-label">Город</label>
    <input type="text" class="form-control" id="validationCustom03" required>
    <div class="invalid-feedback">
      Укажите действительный город.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom04" class="form-label">Регион</label>
    <select class="form-select" id="validationCustom04" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div class="invalid-feedback">
      Пожалуйста, выберите допустимый регион.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom05" class="form-label">Почтовый индекс</label>
    <input type="text" class="form-control" id="validationCustom05" required>
    <div class="invalid-feedback">
      Пожалуйста, предоставьте действительный почтовый индекс.
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Согласен с условиями
      </label>
      <div class="invalid-feedback">
        Согласен с правилами и условиями.
      </div>
    </div>
  </div>
  <div class="col-12">
    <button class="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
  const forms = 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.

<form class="row g-3">
  <div class="col-md-4">
    <label for="validationDefault01" class="form-label">Имя</label>
    <input type="text" class="form-control" id="validationDefault01" value="Марк" required>
  </div>
  <div class="col-md-4">
    <label for="validationDefault02" class="form-label">Фамилия</label>
    <input type="text" class="form-control" id="validationDefault02" value="Отто" required>
  </div>
  <div class="col-md-4">
    <label for="validationDefaultUsername" class="form-label">Имя пользователя</label>
    <div class="input-group">
      <span class="input-group-text" id="inputGroupPrepend2">@</span>
      <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationDefault03" class="form-label">Город</label>
    <input type="text" class="form-control" id="validationDefault03" required>
  </div>
  <div class="col-md-3">
    <label for="validationDefault04" class="form-label">Регион</label>
    <select class="form-select" id="validationDefault04" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-3">
    <label for="validationDefault05" class="form-label">Почтовый индекс</label>
    <input type="text" class="form-control" id="validationDefault05" required>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Согласен с правилами и условиями
      </label>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Отправить форму</button>
  </div>
</form>
Результат:
@

На стороне сервера

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

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

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

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

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

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

  • <input> и <textarea> с .form-control (включая до одной .form-control в группах ввода)
  • <select> с .form-select
  • .form-check
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea" class="form-label">Текстовое поле</label>
    <textarea class="form-control" id="validationTextarea" placeholder="Требуемый пример текстового поля" required></textarea>
    <div class="invalid-feedback">
      Пожалуйста, введите сообщение в текстовое поле.
    </div>
  </div>

  <div class="form-check mb-3">
    <input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
    <label class="form-check-label" for="validationFormCheck1">Установите этот флажок</label>
    <div class="invalid-feedback">Пример недопустимого текста отзыва</div>
  </div>

  <div class="form-check">
    <input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required>
    <label class="form-check-label" for="validationFormCheck2">Переключить это радио</label>
  </div>
  <div class="form-check mb-3">
    <input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
    <label class="form-check-label" for="validationFormCheck3">Или переключите это другое радио</label>
    <div class="invalid-feedback">Еще пример недопустимого текста отзыва</div>
  </div>

  <div class="mb-3">
    <select class="form-select" required aria-label="select example">
      <option value="">Открыть это меню выбора</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Пример недействительного отзыва о выборе</div>
  </div>

  <div class="mb-3">
    <input type="file" class="form-control" aria-label="пример файла" required>
    <div class="invalid-feedback">Пример недопустимого отзыва файла формы</div>
  </div>

  <div class="mb-3">
    <button class="btn btn-primary" type="submit" disabled>Отправить форму</button>
  </div>
</form>
Результат:
Пожалуйста, введите сообщение в текстовое поле.
Пример недопустимого текста отзыва
Еще пример недопустимого текста отзыва
Пример недействительного отзыва о выборе
Пример недопустимого отзыва файла формы

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

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

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4 position-relative">
    <label for="validationTooltip01" class="form-label">Имя</label>
    <input type="text" class="form-control" id="validationTooltip01" value="Марк" required>
    <div class="valid-tooltip">
      Выглядит неплохо!
    </div>
  </div>
  <div class="col-md-4 position-relative">
    <label for="validationTooltip02" class="form-label">Фамилия</label>
    <input type="text" class="form-control" id="validationTooltip02" value="Отто" required>
    <div class="valid-tooltip">
      Выглядит неплохо!
    </div>
  </div>
  <div class="col-md-4 position-relative">
    <label for="validationTooltipUsername" class="form-label">Имя пользователя</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
      <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
      <div class="invalid-tooltip">
        Пожалуйста, выберите уникальное и действительное имя пользователя.
      </div>
    </div>
  </div>
  <div class="col-md-6 position-relative">
    <label for="validationTooltip03" class="form-label">Город</label>
    <input type="text" class="form-control" id="validationTooltip03" required>
    <div class="invalid-tooltip">
      Укажите действительный город.
    </div>
  </div>
  <div class="col-md-3 position-relative">
    <label for="validationTooltip04" class="form-label">Регион</label>
    <select class="form-select" id="validationTooltip04" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div class="invalid-tooltip">
      Пожалуйста, выберите допустимый регион.
    </div>
  </div>
  <div class="col-md-3 position-relative">
    <label for="validationTooltip05" class="form-label">Почтовый индекс</label>
    <input type="text" class="form-control" id="validationTooltip05" required>
    <div class="invalid-tooltip">
      Пожалуйста, предоставьте действительный почтовый индекс.
    </div>
  </div>
  <div class="col-12">
    <button class="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: 0 0 $input-btn-focus-blur $input-focus-width rgba($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-quarter center;
        background-size: $input-height-inner-half $input-height-inner-half;
      }

      &:focus {
        border-color: $border-color;
        @if $enable-shadows {
          @include box-shadow($input-box-shadow, $focus-box-shadow);
        } @else {
          // Avoid using mixin so we can pass custom focus shadow properly
          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-quarter right $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;
        @if $enable-shadows {
          @include box-shadow($form-select-box-shadow, $focus-box-shadow);
        } @else {
          // Avoid using mixin so we can pass custom focus shadow properly
          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": 0 0 $input-btn-focus-blur $input-focus-width rgba(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": 0 0 $input-btn-focus-blur $input-focus-width rgba(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, $data in $form-validation-states {
  @include form-validation-state($state, $data...);
}

Настройка

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

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

  1. Как это работает
  2. Пользовательские стили
  3. Настройки браузера по умолчанию
  4. На стороне сервера
  5. Поддерживаемые элементы
  6. Всплывающие подсказки
  7. CSS
    1. Переменные
    2. Смешивания Sass миксины
    3. Карты Sass
    4. Циклы Sass
    5. Настройка