Javascript Bootstrap 4填写表单时的实时表单验证

我刚刚查看了bootstrap4.4（）中的表单验证部分，并将代码实现到我的项目中，触发验证的代码示例和脚本实现看起来很棒

我想知道是否可以在用户填写表单而不是试图提交表单时实施此验证

例如，如果我有两个输入，First Name和Last Name，这两个输入都是必需的，那么当我更改到Last Name字段时，我可以为我刚刚填写的字段触发验证检查吗

例如，即时验证

我当前的验证（单击表单提交按钮时触发）是：

函数validateForm（）{
var forms=document.getElementsByClassName（'needs-validation'）
var validation=Array.prototype.filter.call（表单，函数（表单）{
console.log（form.checkValidity（））
if（form.checkValidity（）==false）{
event.preventDefault（）
event.stopPropagation（）
//获取“第一个”无效字段
var errorElements=document.querySelectorAll（'.form控件：无效'）
//将用户滚动到无效字段
scrollTo（0，getOffset（errorElements[0]）.top）
}
form.classList.add（'was-validated'）
})
}

您可以在输入中添加一个侦听器，一旦触发，它将调用您的函数

const inputs=document.queryselectoral（“表单输入”）；
inputs.forEach（e=>e.addEventListener（“blur”，validateForm））

checkValidity（）函数也适用于单个输入。将
blur
处理程序绑定到每个输入，然后在验证后向每个输入添加类
是否有效
/
是否无效

(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);
})()

太好了！是否有任何方法可以修改此选项，以防止将
无效
和
有效
类添加到所有尚未触及的输入？例如：现在我编辑名字输入，但是因为姓氏是空的，所以给它一个类？据我所知，这是从父类
was validated
类触发的。