Как проверить формы с помощью Bootstrap 5

Валидация форм является одним из наиболее важных факторов, когда дело доходит до сбора информации и предотвращения неправильного использования веб-форм.

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

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

Формы полностью поддерживаются в Bootstrap 5. Большинство компонентов в основном используются для придания формам чистого и адаптивного вида, который можно использовать при любом размере экрана. В то время как формы Bootstrap 5 автоматически получают правильное форматирование с помощью заданных классов, когда дело доходит до проверки формы, вам нужно настроить некоторые дополнительные классы и некоторый JavaScript, чтобы воспользоваться преимуществами его современной поддержки проверки прямо из коробки.

В этой статье я покажу вам, как вы можете использовать проверку формы Bootstrap 5, чтобы продемонстрировать достойную обратную связь по полям данных формы, таким как textbox, select, checkbox, переключатель, а также по некоторым другим доступным полям формы bootstrap при отправке формы. Мы будем использовать JavaScript, чтобы отключить отправку форм, если введены недопустимые поля.

Примечание: HTML 5 имеет свои собственные средства проверки, но у него есть ограничения, особенно когда дело доходит до поддержки браузера. Одним из заметных ограничений является отсутствие настройки, когда дело доходит до обработки сообщений об ошибках, которые вам нужно будет найти способ отсортировать. К счастью, Bootstrap 5 имеет под рукой современные стили проверки форм.

<div class="col-md-4">
   <label for="validationSuccess" class="form-label text-success">Input with success</label>
   <input type="text" class="form-control is-valid" id="validationSuccess" required>
</div>
<div class="col-md-4">
   <label for="validationError" class="form-label text-danger">Input with error</label>
   <input type="text" class="form-control is-invalid" id="validationError" required>
</div>

<div class="col-md-4">
   <label for="validationSuccess" class="form-label text-success">Input with success</label>
   <input type="text" class="form-control is-valid" id="validationSuccess" required>
   <div class="valid-feedback">
      Это сообщение об успешной проверке формы состояния!
   </div>
</div>
<div class="col-md-4">
<label for="validationError" class="form-label text-danger">Input with error</label>
<input type="text" class="form-control is-invalid" id="validationError" required>
<div class="invalid-feedback">
   Это сообщение об ошибке проверки формы!
</div>

<div class="col-md-4 position-relative">
   <label for="validationSuccess" class="form-label text-success">Input with success</label>
   <input type="text" class="form-control" value="Samuel Norton" required>
   <div class="valid-tooltip">
      Это сообщение об успешной проверке формы состояния!
   </div>
</div>
<div class="col-md-4 position-relative">
   <label for="validationError" class="form-label text-danger">Input with error</label>
   <input type="text" class="form-control" id="validationError" required>
   <div class="invalid-tooltip">
      Это сообщение об ошибке проверки формы!
   </div>
</div>

Давайте посмотрим, как эти входные данные для проверки должны выглядеть в браузере:

<form class="row g-3 requires-validation" novalidate>
   <div class="col-md-12">
      <label for="username" class="form-label">Логин:</label>
      <input type="text" class="form-control" id="username" required>
      <div class="valid-feedback">
         Логин выглядит хорошо!
      </div>
      <div class="invalid-feedback">
         Имя пользователя обязательно!
      </div>
   </div>
   <div class="col-md-12">
      <label for="password" class="form-label">Пароль:</label>
      <input type="text" class="form-control" id="password" required>
      <div class="valid-feedback">
         Пароль выглядит хорошо!
      </div>
      <div class="invalid-feedback">
         Требуется пароль!
      </div>
   </div>
   <div class="col-12">
      <button class="btn btn-primary" type="submit">Логин</button>
   </div>
</form>

Давайте подробнее рассмотрим разметку выше:

• Тег form имеет логический атрибут novalidate. Это предотвращает появление всплывающих подсказок обратной связи браузера по умолчанию без перекрытия доступа к API проверки форм в JavaScript.
• Мы не включили классы .is-valid и .is-invalid в каждое поле данных. Стили Bootstrap :invalid и :valid применят их к элементам управления формами с использованием JavaScript.
• Мы добавили класс .requires-validation внутри тега form. Это не семантический класс из bootstrap. Вы можете переименовать его в любое имя класса, которое вам больше нравится. Цель этого класса - помочь JavaScript извлекать все элементы формы для применения соответствующих пользовательских стилей проверки начальной загрузки (подробнее об этом позже).
• В конце каждого поля данных или входных данных мы добавили атрибут required. Это просто указывает, что перед отправкой формы необходимо заполнить определенное поле данных.
• Опять же, мы используем .valid-feedback и .invalid-feedback внизу каждого поля данных. div с классом .valid-feedback - это успешное сообщение о проверке формы начальной загрузки, при этом div с классом .invalid-feedback - это состояние ошибки сообщения о проверке формы.

Далее давайте добавим код JavaScript для отключения отправки форм, если при отправке формы пользователем присутствуют недопустимые поля:

<script>
(function () {
'use strict'
const forms = document.querySelectorAll('.requires-validation')
Array.from(forms)
  .forEach(function (form) {
    form.addEventListener('submit', function (event) {
    if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
    }
  
      form.classList.add('was-validated')
    }, false)
  })
})()
</script>

Приведенный выше код JavaScript просто получает все формы через метод querySelectorAll и возвращает статический список узлов, который представляет список элементов документа с использованием класса .required-validation.

Далее, для каждой из найденных форм Bootstrap код JavaScript добавит EventListener, который будет вызываться всякий раз, когда доставляется указанное событие и оно отправляется. Таким образом, всякий раз, когда пользователь отправляет форму, будет вызываться form.checkValidity() . Этот метод проверяет, имеет ли поле данных какие-либо ограничения, и удовлетворяет ли оно заданным ограничениям. Если это не удается, браузер просто запускает недопустимое событие и возвращает false .

Итак, в случае сбоя будут вызваны оба следующих метода JavaScript:

• preventDefault() - метод, который просто предотвращает использование события по умолчанию в обычном режиме. В данном случае отправку формы.
• stopPropagation() - метод, который предотвращает дальнейшее распространение текущего события.

Наконец, он добавит класс .was-validated в тег формы, чтобы показать состояние проверки формы и сообщения.

Bootstrap применяет стили :invalid и :valid к родительскому классу .was-validated, когда он применяется к форме. На самом деле вы можете поместить класс .was-validated в тег формы даже без помощи JavaScript, но это автоматически покажет состояния проверки формы и сообщения еще до того, как пользователь отправит форму. Однако наличие JavaScript для обработки события отправки формы и проверки предоставит вам более безопасный современный процесс проверки на стороне клиента.

Давайте посмотрим, как это должно выглядеть в браузере:

Собираем все это вместе

Теперь, чтобы собрать все это воедино, давайте создадим простую страницу регистрации и посмотрим, как мы можем применить современные стили проверки Bootstrap 5 к каждому полю данных.

Ниже приведена разметка.

\

<div class="form-body">
   <div class="row">
      <div class="form-holder">
         <div class="form-content">
            <div class="form-items">
               <h3>Зарегистрируйтесь сегодня</h3>
               <p>Fill in the data below.</p>
               <form class="requires-validation" novalidate>
                  <div class="col-md-12">
                     <input class="form-control" type="text" name="name" placeholder="Ваше Имя" required>
                     <div class="valid-feedback">Поле «Ваше Имя» действительно!</div>
                     <div class="invalid-feedback">Поле «Ваше Имя» не может быть пустым!</div>
                  </div>
                  <div class="col-md-12">
                     <input class="form-control" type="email" name="email" placeholder="E-mail" required>
                     <div class="valid-feedback">Поле "Email" действительно!</div>
                     <div class="invalid-feedback">Поле "Email" не может быть пустым!</div>
                  </div>
                  <div class="col-md-12">
                     <select class="form-select mt-3" required>
                        <option selected disabled value="">Позиция</option>
                        <option value="jweb">Младший веб-разработчик</option>
                        <option value="sweb">Старший веб-разработчик</option>
                        <option value="pmanager">Руководитель проекта</option>
                     </select>
                     <div class="valid-feedback">Вы выбрали позицию!</div>
                     <div class="invalid-feedback">Пожалуйста, выберите позицию!</div>
                  </div>
                  <div class="col-md-12">
                     <input class="form-control" type="password" name="password" placeholder="Пароль" required>
                     <div class="valid-feedback">Поле "Пароль" действительно!</div>
                     <div class="invalid-feedback">Поле "Пароль" не может быть пустым!</div>
                  </div>
                  <div class="col-md-12 mt-3">
                     <label class="mb-3 mr-1" for="gender">Пол: </label>
                     <input type="radio" class="btn-check" name="gender" id="male" autocomplete="off" required>
                     <label class="btn btn-sm btn-outline-secondary" for="male">Мужской</label>
                     <input type="radio" class="btn-check" name="gender" id="female" autocomplete="off" required>
                     <label class="btn btn-sm btn-outline-secondary" for="female">Женский</label>
                     <input type="radio" class="btn-check" name="gender" id="secret" autocomplete="off" required>
                     <div class="valid-feedback mv-up">Вы выбрали пол!</div>
                     <div class="invalid-feedback mv-up">Пожалуйста, выберите пол!</div>
                  </div>
                  <div class="form-check">
                     <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
                     <label class="form-check-label">Я подтверждаю, что все данные верны</label>
                     <div class="invalid-feedback">Пожалуйста, подтвердите правильность введенных данных!</div>
                  </div>
                  <div class="form-button mt-3">
                     <button id="submit" type="submit" class="btn btn-primary">Зарегистрироваться</button>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
</div>

Далее добавим CSS, чтобы настроить внешний вид нашей формы.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;900&display=swap');
*,
body {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}
 
html,
body {
    height: 100%;
    background-color: #152733;
    overflow: hidden;
}
 
.form-holder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}
 
.form-holder .form-content {
    position: relative;
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 60px;
}
 
.form-content .form-items {
    border: 3px solid #fff;
    padding: 40px;
    display: inline-block;
    width: 100%;
    min-width: 540px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: left;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
 
.form-content h3 {
    color: #fff;
    text-align: left;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 5px;
}
 
.form-content h3.form-title {
    margin-bottom: 30px;
}
 
.form-content p {
    color: #fff;
    text-align: left;
    font-size: 17px;
    font-weight: 300;
    line-height: 20px;
    margin-bottom: 30px;
}
 
.form-content label,
.was-validated .form-check-input:invalid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {
    color: #fff;
}
 
.form-content input[type=text],
.form-content input[type=password],
.form-content input[type=email],
.form-content select {
    width: 100%;
    padding: 9px 20px;
    text-align: left;
    border: 0;
    outline: 0;
    border-radius: 6px;
    background-color: #fff;
    font-size: 15px;
    font-weight: 300;
    color: #8D8D8D;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    margin-top: 16px;
}
 
.btn-primary {
    background-color: #6C757D;
    outline: none;
    border: 0px;
    box-shadow: none;
}
 
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #495056;
    outline: none !important;
    border: none !important;
    box-shadow: none;
}
 
.form-content textarea {
    position: static !important;
    width: 100%;
    padding: 8px 20px;
    border-radius: 6px;
    text-align: left;
    background-color: #fff;
    border: 0;
    font-size: 15px;
    font-weight: 300;
    color: #8D8D8D;
    outline: none;
    resize: none;
    height: 120px;
    -webkit-transition: none;
    transition: none;
    margin-bottom: 14px;
}
 
.form-content textarea:hover,
.form-content textarea:focus {
    border: 0;
    background-color: #ebeff8;
    color: #8D8D8D;
}
 
.mv-up {
    margin-top: -9px !important;
    margin-bottom: 8px !important;
}
 
.invalid-feedback {
    color: #ff606e;
}
 
.valid-feedback {
    color: #2acc80;
}

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

Подведение итогов

Создание веб-сайтов и даже приложений сегодня намного сложнее и отнимает много времени, чем раньше. Использование современных методов и стилей проверки форм Bootstrap 5 предоставит вам простой способ, но ценную и действенную обратную связь с вашими пользователями "из коробки", не слишком беспокоясь о стилях.

Самое приятное то, что вы по-прежнему можете настроить сообщение о проверке формы Bootstrap, включая стили по своему вкусу, не изобретая велосипед заново.