Bootstrap 5 как подсветить input(сделать обводку красной) при ошибке?

Question

Ранее не имел значительного опыта работы с bootstrap, при этом думал что такие элементарные вещи в нём есть. Мне нужно подсветить input содержащий E-mail красным. С помощью какого класса я могу это сделать? Почему то в статьях на эту тему я видел что нужно зачем то создавать в style специальные для этого стили. Не ужели нет такой стандартной штуки?

У меня следующий код:

  <div class="row">
    <div class="input-group mb-3">
      <span class="input-group-text" id="basic-addon1">E-mail</span>
      <input type="text" id="email" class="form-control" placeholder="Введите E-mail адрес" aria-label="Email" aria-describedby="basic-addon1">
    </div>
  </div>

Я знаю что используя класс text-success можно подсветить текст зелёным, только мне нужна именно обводка.

Если это действие принято делать с помощью популярного JavaScript плагина, то что это за плагин и как воспользоваться?

Answer 1

Есть! Класс is-invalid добавь его к input

Сейчас посмотрел, почему то в 5-ой версии bootstrap это почему то так же явно в документации не указали(может ещё поправят конечно), так что исследуй документацию старой версии https://getbootstrap.com/docs/4.5/components/forms/

Answer 2

Все как и в Bootstrap 4:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
  
  <div class="container">
    <form class="form">
      <div class="row">
        <div class="input-group mb-3">
          <span class="input-group-text" id="basic-addon1">E-mail</span>
          <input type="text" id="email" class="form-control is-valid" placeholder="Введите E-mail адрес" aria-label="Email" aria-describedby="basic-addon1">
          <div class="valid-feedback">
            Looks good!
          </div>
        </div>
        
        <div class="input-group mb-3">
          <span class="input-group-text">City</span>
          <input class="form-control is-invalid" type="text" placeholder="Default input">
          <div class="invalid-feedback">
            Please provide a valid city.
          </div>
        </div>
      </div>
    </form>
  </div>

БЛОГ НА HUSL

Bootstrap 5 как подсветить input(сделать обводку красной) при ошибке?

Ответы (2 шт):