遵循文档引入脚本后Bootstrap表单客户端验证仍不生效问题

导致客户端验证不生效的核心问题有2个，按优先级排列：

• 第一个也是最直接的问题：你的验证脚本的立即执行函数没有触发执行。你写的IIFE（立即调用函数表达式）结构最后缺少调用括号()，所以整个验证逻辑从来没有运行过，自然不会绑定表单的提交事件。
• 第二个常见问题：如果你的脚本放在body标签最顶部、或者放在head标签内，执行时DOM还没有完成渲染，document.querySelectorAll('.validated-form')会找不到你的表单元素，导致事件绑定失败。

修复步骤 #

1. 首先修正验证脚本的IIFE写法，末尾添加()让函数自动执行：

(function () {
    'use strict'

    bsCustomFileInput.init()

    // 获取所有需要应用Bootstrap自定义验证样式的表单
    const forms = document.querySelectorAll('.validated-form')

    // 遍历表单阻止默认提交逻辑
    Array.from(forms)
        .forEach(function (form) {
            form.addEventListener('submit', function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }

                form.classList.add('was-validated')
            }, false)
        })
})() // 此处添加括号触发函数执行

2. 确认你的验证脚本放在body标签的最末尾，在所有页面内容渲染完成后再执行，避免找不到DOM元素。
3. 额外检查项：确保你已经正确引入了bsCustomFileInput的依赖脚本，且加载顺序在你上面的验证脚本之前，否则bsCustomFileInput.init()执行报错会导致后续验证逻辑中断。

验证逻辑修复后，你表单上的novalidate属性、validated-form类名、输入框的required属性配置都是正确的，客户端验证即可正常触发。

内容的提问来源于stack exchange，提问作者econobro