Bootstrap 4, состояние проверки формы в ожидании

Question

Я хочу сделать состояние ожидания формы при проверке API сервера на допустимость полей. Используя scts-код Bootstrap 4, я изменил этот фрагмент кода в файле _form.scss:

Обычно, теперь настройка is-warning, должна поместить ввод формы в состояние предупреждения, где граница имеет цвет предупреждения, но она не работает, действительна и недействительна, конечно, работает правильно

Я проверил, что CSS, связанный с is-warning, правильно добавлен в консоль отладчика Firefox, я просто не знаю, почему is-warning не применяет правильное событие эффекта, если оно присутствует в CSS.

Answer 1

@include form-validation-state("warning", ...) не может работать из-за строк, подобных этой: https://github.com/twbs/bootstrap/blob/v4.1.3/scss/mixins/_forms.scss#L55

.form-control,
  .custom-select {
    .was-validated &:#{$state},  // <====
    &.is-#{$state} {
      ...
    }
  }
}

Видите :#{$state}? он сгенерирует :warning, который не существует в CSS. Псевдоклассы CSS :valid и :invalid существуют, поэтому они работают.

Когда браузер встречает CSS-селектор, который он не понимает, он игнорирует весь оператор CSS, поэтому &.is-#{$state} (&.is-warning) не будет применен.

См. https://github.com/twbs/bootstrap/issues/23371