Bootstrap表单验证之后滚动到第一个验证失败的位置

本文使用Bootstrap4.4.1版本。
在用Bootstrap进行表单验证时，需要给form添加class="needs-validation"和novalidate属性。

    

        * 商品名称
        

            
            
请输入商品名称
        
    
    

        * 商品分类
        

            
                请选择
                美容护肤
                服饰鞋帽
                电子产品
                日用百货
            
            
请选择商品分类
        
    
    

        * 商品信息
        

            
            
请输入商品信息
        
    
    

        

            确 定
        
    

还有如下js代码：

$(function() {
    // bootstrap 表单验证
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {

            // 滚动到第一个验证失败的位置
            var invalidDom = $('.needs-validation .form-control:invalid');
            invalidDom[0].scrollIntoView(true);

            event.preventDefault();
            event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
})

如果需要验证后滚动到第一个失败的位置只需添加两行代码，invalidDom可根据自己项目做适当调整。

// 滚动到第一个验证失败的位置
var invalidDom = $('.needs-validation .form-control:invalid');
invalidDom[0].scrollIntoView(true);