Bootstrap 4 проверка формы в режиме реального времени при заполнении формы

Question

Я только что посмотрел раздел проверки формы в Bootstrap 4.4 (https://getbootstrap.com/docs/4.4/components/forms/#how -it-works ) и внедрил код в свой проект, пример кода и реализацию скрипта для запуска проверка выглядит великолепно!

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

Например, если у меня есть два ввода, Имя и Фамилия, оба из которых необходимы, когда я перехожу на поле Фамилия, могу ли я получить проверку проверки для запуска для поля, которое я только что заполнил?

Например, проверка на лету?

Моя текущая проверка (запускается при нажатии кнопки отправки формы):

function validateForm () {
  var forms = document.getElementsByClassName('needs-validation')
  var validation = Array.prototype.filter.call(forms, function(form) {
    console.log(form.checkValidity())
    if (form.checkValidity() === false) {
      event.preventDefault()
      event.stopPropagation()

      // get the "first" invalid field
      var errorElements = document.querySelectorAll('.form-control:invalid')

      // scroll the user to the invalid field
      window.scrollTo(0, getOffset(errorElements[0]).top)

    }
    form.classList.add('was-validated')
  })
}

Answer 1

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

const inputs = document.querySelectorAll("#form input");

inputs.forEach(e => e.addEventListener("blur", validateForm));

<form id="form">
  <input type="text" placeholder="text input">
  <input type="text" placeholder="text input">
</form>

Answer 2

Функция checkValidity () работает и на отдельных входах. Привязать обработчик blur к каждому входу, а затем добавить класс is-valid / is-invalid к каждому входу после проверки ...

(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom validation styles
    var inputs = document.getElementsByClassName('form-control')

    // Loop over each input and watch blue event
    var validation = Array.prototype.filter.call(inputs, function(input) {

      input.addEventListener('blur', function(event) {
        // reset
        input.classList.remove('is-invalid')
        input.classList.remove('is-valid')

        if (input.checkValidity() === false) {
            input.classList.add('is-invalid')
        }
        else {
            input.classList.add('is-valid')
        }
      }, false);
    });
  }, false);
})()

https://codeply.com/p/mzBNbAlOvQ