Стили проверки формы

Браузер умеет сам проверять поля по атрибутам required, type="email", minlength — это было в учебнике. Но его всплывающие подсказки выглядят по-разному и пропадают через пару секунд. Bootstrap показывает результат проверки прямо в форме: красная рамка и текст ошибки под неверным полем, зелёная рамка у верного.

Классы для одного поля

Класс is-invalid красит поле в красный и показывает следующий за ним блок invalid-feedback. Класс is-valid красит в зелёный и показывает valid-feedback:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="mb-3">
  <label for="name" class="form-label">Имя</label>
  <input type="text" class="form-control is-valid" id="name" value="Анна">
  <div class="valid-feedback">Отлично!</div>
</div>
<div class="mb-3">
  <label for="mail" class="form-label">Email</label>
  <input type="email" class="form-control is-invalid" id="mail" value="anna@">
  <div class="invalid-feedback">Введите адрес целиком, например anna@example.com.</div>
</div>

Первое поле с зелёной рамкой и галочкой, второе — с красной рамкой, значком и текстом ошибки под ним. Эти классы ставит ваш код, когда сервер вернул ошибку.

Проверка браузером

Чаще удобнее отдать проверку браузеру, а Bootstrap — только показ. Форме ставят novalidate, чтобы отключить стандартные подсказки, и после попытки отправки добавляют класс was-validated. Тогда поля окрашиваются сами по правилам из атрибутов:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<form id="signup" class="row g-3" novalidate>
  <div class="col-12">
    <label for="signupEmail" class="form-label">Рабочий email</label>
    <input type="email" class="form-control" id="signupEmail" required>
    <div class="invalid-feedback">Нужен корректный email.</div>
  </div>
  <div class="col-12">
    <label for="team" class="form-label">Название команды</label>
    <input type="text" class="form-control" id="team" minlength="3" required>
    <div class="invalid-feedback">Не короче трёх символов.</div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Создать аккаунт</button>
  </div>
</form>
 
<script>
  const form = document.querySelector('#signup');
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    form.classList.add('was-validated');
    if (form.checkValidity()) {
      console.log('Форма заполнена верно, можно отправлять');
    }
  });
</script>

Нажмите «Создать аккаунт» с пустыми полями — оба станут красными с текстом ошибки. Заполните их, и рамки по мере ввода станут зелёными, а после повторного нажатия под примером появится сообщение из console.log. Метод checkValidity() возвращает true, когда все поля проходят проверку.

Как это устроено

Bootstrap опирается на псевдоклассы :invalid и :valid из учебника. Правило вида .was-validated .form-control:invalid включает красную рамку, а соседний .invalid-feedback становится видимым. Поэтому блок с текстом ошибки должен стоять сразу после поля, на одном уровне с ним.

Частая ошибка

Добавить was-validated сразу, в HTML. Тогда пустая форма ещё до первого ввода вся покрыта красными рамками и ошибками — пользователь видит упрёки, хотя ничего не сделал. Ставьте класс только после попытки отправки, как в примере выше.