Bootstrap 5 - Проверка формы

Bootstrap 5 на момент написания находится на альфа-стадии и может быть изменен.

Bootstrap - популярная библиотека пользовательского интерфейса для любых приложений JavaScript.

В этой статье мы рассмотрим, как добавить проверку формы с помощью Bootstrap 5.

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

Мы можем использовать проверку формы по умолчанию в браузере.

Например, мы можем написать:

<form class="row g-3">
  <div class="col-md-4">
    <label for="first-name" class="form-label">First name</label>
    <input type="text" class="form-control" id="first-name" value="james" required>
  </div>
  <div class="col-md-4">
    <label for="last-name" class="form-label">Last name</label>
    <input type="text" class="form-control" id="last-name" value="smith" required>
  </div>
  <div class="col-md-4">
    <label for="username" class="form-label">Username</label>
    <div class="input-group">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" id="username" required>
    </div>
  </div>
  <div class="col-md-6">
    <label for="city" class="form-label">City</label>
    <input type="text" class="form-control" id="city" required>
  </div>
  <div class="col-md-3">
    <label for="region" class="form-label">Region</label>
    <select class="form-select" id="region" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-3">
    <label for="postal-code" class="form-label">Postal Code</label>
    <input type="text" class="form-control" id="postal-code" required>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="agree" required>
      <label class="form-check-label" for="agree">
        I agree
      </label>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Sign up</button>
  </div>
</form>

Мы добавляем поля с атрибутом require, чтобы добавить проверки для проверки формы.

Поскольку у нас нет атрибута novalidate в самой форме, будет использоваться проверка браузера.

Классы валидации

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

Например, мы можем написать:

<form class="row g-3">
  <div class="col-md-4">
    <label for="first-name" class="form-label">First name</label>
    <input type="text" class="form-control is-valid" id="first-name" value="james" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="last-name" class="form-label">Last name</label>
    <input type="text" class="form-control is-valid" id="last-name" value="smith" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="username" class="form-label">Username</label>
    <div class="input-group">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control is-invalid" id="username" required>
      <div class="invalid-feedback">
        Username is required.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <label for="city" class="form-label">City</label>
    <input type="text" class="form-control is-invalid" id="city" required>
    <div class="invalid-feedback">
      City is requird
    </div>
  </div>
  <div class="col-md-3">
    <label for="region" class="form-label">Region</label>
    <select class="form-select is-invalid" id="region" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div class="invalid-feedback">
      Region is required
    </div>
  </div>
  <div class="col-md-3">
    <label for="postal-code" class="form-label">Postal Code</label>
    <input type="text" class="form-control is-invalid" id="postal-code" required>
    <div class="invalid-feedback">
      Postal code is required
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="agree" required>
      <label class="form-check-label" for="agree">
        I agree
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Sign up</button>
  </div>
</form>

для добавления стилей проверки формы.

У нас есть класс invalid-feedback для отображения сообщения, если поле недействительно.

Класс valid-feedback используется для отображения сообщения для допустимых полей.

Класс is-valid используется во входных данных, чтобы указать, что они действительны.

is-invalid используется для отображения недопустимых полей.

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

Стили проверки могут быть добавлены во входные данные, текстовые поля с классом form-control.

К элементам выбора с классом .form-select также могут применяться стили проверки.

.form-check s и .form-file также могут применять стили.

Например, мы можем написать:

<form class="was-validated">
  <div class="mb-3">
    <label for="textarea" class="form-label">Textarea</label>
    <textarea class="form-control is-invalid" id="textarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      text is required
    </div>
  </div>
<div class="form-check mb-3">
    <input type="checkbox" class="form-check-input" id="checkbox" required>
    <label class="form-check-label" for="checkbox">agree</label>
    <div class="invalid-feedback">invalid checkbox</div>
  </div>
<div class="form-check">
    <input type="radio" class="form-check-input" id="apple" name="radio-stacked" required>
    <label class="form-check-label" for="radio">apple</label>
  </div>
  
  <div class="form-check mb-3">
    <input type="radio" class="form-check-input" id="orange" name="radio-stacked" required>
    <label class="form-check-label" for="orange">orange</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>
  <div class="mb-3">
    <select class="form-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">invalid select</div>
  </div>
  <div class="form-file mb-3">
    <input type="file" class="form-file-input" id="file" required>
    <label class="form-file-label" for="file">
      <span class="form-file-text">Choose file...</span>
      <span class="form-file-button">Browse</span>
    </label>
    <div class="invalid-feedback">invalid file</div>
  </div>
  <div class="mb-3">
    <button class="btn btn-primary" type="submit" disabled>Submit</button>
  </div>
</form>

was-validated применяется к форме.

Затем мы добавляем классы is-invalid и invalid-feedback в поля и сообщения.

Все будет красным.

У полей ввода и текстовых полей будет восклицательный знак.

Заключение

Мы можем добавлять стили проверки с помощью различных классов, предоставляемых Bootstrap 5.