Bootstrap模态框加载外部PHP表单时表单验证失效求助

嘿，我来帮你搞定这个动态加载表单后验证失效的问题！你遇到的核心原因是动态加载的表单元素不会自动触发原生HTML5验证，再加上你的AJAX代码直接阻止了默认提交行为，导致验证逻辑根本没机会运行。下面是一步步的解决方案：

第一步：修正temp.php里的基础错误 #

你的temp.php里有两处拼写错误，这会直接导致表单结构或验证规则失效：

• 把属性reguired改成正确的required（HTML5必填属性的标准拼写）
• 把闭合标签</tale>改成</table>（HTML标签拼写错误会破坏DOM结构，影响浏览器解析）

修正后的temp.php关键代码片段：

echo " <td style=\"width: 170px; max-width: 170px;\"><input class=\"form-control input-sm\" type=\"text\" name=\"Sample_1\" placeholder=\"Sample 1...\" required></td>\n";
echo " <td style=\"width: 170px; max-width: 170px;\"><input class=\"form-control input-sm\" type=\"text\" name=\"Sample_2\" placeholder=\"Sample 2...\" required></td>\n";
// ... 其他表单元素代码
echo "</table>\n"; // 修正表格闭合标签

第二步：调整AJAX提交逻辑，手动触发验证 #

因为表单是动态加载的，且你用event.preventDefault()阻止了默认提交行为，所以需要手动检查表单有效性。修改index.php里的提交脚本：

$(document).ready(function(){
    // 用事件委托绑定按钮点击，兼容动态元素场景
    $(document).on('click', '#save', function(event){
        event.preventDefault();
        var form = $("#myForm")[0]; // 获取原生表单DOM元素
        
        // 手动检查表单是否符合验证规则
        if(form.checkValidity()){
            // 验证通过，发送AJAX请求
            $.ajax({
                url : "save.php",
                type: 'POST',
                data : $(form).serialize(),
                success: function(response){
                    $('.modal-body').html(response);
                },
                error: function(){
                    $('.modal-body').html('Error...');
                }
            });
        } else {
            // 触发原生HTML5验证提示（和静态表单的验证样式一致）
            form.reportValidity();
        }
    });
});

额外说明：为什么静态表单能正常验证？ #

静态表单在页面初始化时就存在于DOM中，浏览器会自动识别required等验证属性，点击提交按钮时会先执行原生验证流程，只有验证通过才会触发提交行为。但动态加载的表单是在页面加载完成后才添加的，再加上你直接阻止了默认提交，导致验证逻辑完全没被触发。

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