Bootstrap 5模态框中AJAX加载页面的formvalidation.io验证失效问题

核心原因 #

1. DOMContentLoaded事件未触发：该事件仅在页面首次加载完成时触发，AJAX动态插入的内容不会触发这个事件，导致表单验证的初始化代码根本没执行。
2. 冗余资源与标签冲突：driver_support.php里包含了完整的html、head、body标签，还重复加载了Bootstrap和FormValidation的资源，插入到模态框后会和主页面的资源冲突，也不符合DOM结构规范。

具体修复步骤 #

1. 清理driver_support.php的冗余代码 #

只保留表单内容，去掉所有页面结构标签和重复的资源引入，修改后代码如下：

<form name="tickets" id="tickets" action="my_script.php" method="post">
    <div class="mb-3">
        <label class="form-label text-dark">Post a reply</label>
        <textarea class="form-control" rows="3" name="message"></textarea>
    </div>
    <button type="submit" class="btn btn-lg btn-primary">Reply</button>
</form>

2. 在AJAX成功回调中手动初始化表单验证 #

在主页面的AJAX成功函数里，插入内容后立即初始化FormValidation，确保DOM元素已存在：

$(document).ready(function () {
    $('.btn-status').click(function () {
        var custId = $(this).data('id');
        $.ajax({
            url: 'driver_support.php',
            type: 'get',
            data: { custId: custId },
            success: function (response) {
                $('.modal-body').html(response);
                $('#support_modal').modal('show');
                
                // 手动初始化表单验证
                FormValidation.formValidation(document.getElementById('tickets'), {
                    fields: {        
                        message: {
                            validators: {
                                notEmpty: {
                                    message: 'Please enter a message'
                                }
                            }
                        },
                    },
                    plugins: {
                        trigger: new FormValidation.plugins.Trigger(),
                        submitButton: new FormValidation.plugins.SubmitButton(),
                        defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
                        bootstrap: new FormValidation.plugins.Bootstrap5({
                            rowSelector: '.mb-3',
                        }),
                    },
                });
            }
        });
    });
});

3. 确保主页面已加载必要资源 #

主页面需要提前引入所有依赖的CSS和JS，避免重复加载：

<!-- 主页面头部引入 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="formvalidation/dist/css/formValidation.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="formvalidation/dist/js/FormValidation.min.js"></script>
<script src="formvalidation/dist/js/plugins/Bootstrap5.min.js"></script>

备选方案：在AJAX内容中直接执行初始化 #

如果你更倾向于把验证逻辑留在driver_support.php里，也可以去掉DOMContentLoaded监听，直接写初始化代码（因为插入到模态框时表单已经存在于DOM中）：

<!-- driver_support.php 修改后 -->
<form name="tickets" id="tickets" action="my_script.php" method="post">
    <div class="mb-3">
        <label class="form-label text-dark">Post a reply</label>
        <textarea class="form-control" rows="3" name="message"></textarea>
    </div>
    <button type="submit" class="btn btn-lg btn-primary">Reply</button>
</form>

<script>
// 直接初始化，无需等待DOMContentLoaded
FormValidation.formValidation(document.getElementById('tickets'), {
    fields: {        
        message: {
            validators: {
                notEmpty: {
                    message: 'Please enter a message'
                }
            }
        },
    },
    plugins: {
        trigger: new FormValidation.plugins.Trigger(),
        submitButton: new FormValidation.plugins.SubmitButton(),
        defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
        bootstrap: new FormValidation.plugins.Bootstrap5({
            rowSelector: '.mb-3',
        }),
    },
});
</script>

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