Bootstrap表单验证未返回错误问题排查

我之前也碰到过一模一样的情况，大概率是下面几个常见问题导致的，你可以挨个排查试试：

1. 依赖资源没正确引入 #

FormValidation得依赖jQuery（或者Zepto这类兼容库）以及它自身的CSS、JS文件，你得确认这些资源都加载正常：

• 先检查HTML头部有没有引入符合版本要求的jQuery（比如v1.10以上）
• 打开浏览器开发者工具的Network标签，看看FormValidation的CSS和JS文件有没有404错误，路径一定要写对
• 注意引入顺序：先加载jQuery，再加载FormValidation的JS，最后放你的初始化脚本

正确的引入顺序示例：

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入FormValidation样式 -->
<link rel="stylesheet" href="/path/to/formValidation.min.css">
<!-- 引入FormValidation核心JS -->
<script src="/path/to/formValidation.min.js"></script>
<!-- 如果用了Bootstrap主题，还要加对应的适配器 -->
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/bootstrapValidator.min.js"></script>

2. 初始化代码位置不对 #

要是你的初始化代码写在DOM还没加载完的地方，FormValidation找不到表单元素，自然不会生效。你得把初始化代码放在$(document).ready()里面，或者直接放到页面底部（</body>标签之前）：

正确的初始化示例：

$(document).ready(function() {
    $('#your-form-id').formValidation({
        framework: 'bootstrap', // 换成你用的框架类型
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: '邮箱不能为空'
                    },
                    emailAddress: {
                        message: '请输入有效的邮箱地址'
                    }
                }
            },
            terms: {
                validators: {
                    notEmpty: {
                        message: '请勾选同意条款'
                    }
                }
            }
        }
    });
});

3. 表单元素的name属性缺失或不匹配 #

FormValidation是通过元素的name属性识别字段的，要是输入框、复选框没设置name，或者初始化代码里的fields键和name值对不上，肯定不会触发验证：

• 检查输入框：比如<input type="text" name="username" id="username">，要保证name="username"和初始化里的username字段对应
• 复选框同理：<input type="checkbox" name="terms" id="terms">，name得和fields里的terms一致

4. 自定义提交逻辑没手动触发验证 #

如果你的表单是用自定义JS事件提交（比如点击按钮用AJAX提交），不是默认的表单提交，就得手动调用验证方法：

$('#submit-btn').click(function() {
    var form = $('#your-form-id').formValidation('validate');
    if (form.isValid()) {
        // 验证通过，执行你的提交逻辑
    }
});

5. 版本兼容性问题 #

要是你下载的示例代码用的是旧版FormValidation，但你引入的是新版库，可能会出现API不兼容的情况。建议确保你引入的CSS/JS版本和示例代码用的版本一致。

你可以先从检查依赖和初始化位置开始，这俩是最常见的问题，一般都能解决。

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