如何在动态加载的jQuery模态框中实现jQuery Validate表单验证？

DevOps 小满

2026-4-29

解决jQuery模态框中分部视图的客户端验证问题

嘿，我完全懂你遇到的麻烦——在模态框里加载分部视图做员工创建时，客户端验证压根没像普通视图那样弹出错误提示，对吧？这其实是因为ASP.NET MVC的客户端验证脚本需要在新DOM元素加载完成后重新初始化，而你现在的代码没做这一步。让我一步步帮你把这个问题搞定！

问题根源分析

你用$("#create").load()异步加载分部视图，但验证脚本是绑定在初始DOM上的，新加载的表单元素没被验证器注册，所以验证触发不了。
你现在的提交按钮直接发起$.post请求，没有先触发客户端验证，就算字段为空也会直接提交。
就算后端返回了模型验证错误，你也没把带错误提示的分部视图重新渲染回模态框里。

具体修复步骤

第一步：修正Index视图的脚本与HTML错误

首先，你原来把<button class="btn-create">写在了<script>标签里，这是语法错误，得把它移到页面的HTML区域；另外模态框的ata-keyboard拼写错误要改成data-keyboard。然后修改脚本逻辑：

<!-- 把创建按钮移到页面合适的HTML位置，比如模态框外面 -->
<button type="button" class="btn btn-info btn-lg btn-create" data-toggle="modal" data-target="#myModal3">Criar Funcionário</button>

<!-- 修正后的模态框HTML -->
<div class="modal fade" id="myModal3" role="dialog" data-keyboard="false" data-backdrop="static">
 <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
 <!-- Modal content-->
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">&times;</button>
 <h4 class="modal-title">Criar Funcionário</h4>
 </div>
 <div class="modal-body" id="create">
 </div>
 <div class="modal-footer">
 <button type="submit" class="btn btn-primary btn-submitcreate">Criar</button>
 <button type="button" class="btn btn-primary" data-dismiss="modal">Fechar</button>
 </div>
 </div>
 </div>
</div>

@section Scripts {
<script>
$(document).ready(function () {
    $(".btn-create").on("click", function (e) {
        $("#create").load("/Employees/Create/", function() {
            // 加载完成后，重新初始化客户端验证
            $.validator.unobtrusive.parse("#create form");
        });
    });

    $(".btn-submitcreate").on("click", function (e) {
        e.preventDefault(); // 阻止默认提交行为
        var form = $("#create form");
        
        // 先触发客户端验证，验证通过再提交
        if (form.valid()) {
            $.post(form.attr('action'), form.serialize(), function (data) {
                // 如果后端返回HTML，说明模型验证失败，重新渲染带错误的分部视图
                if (typeof data === 'string') {
                    $("#create").html(data);
                    // 再次初始化验证，确保新的错误提示能生效
                    $.validator.unobtrusive.parse("#create form");
                } else {
                    // 验证成功，刷新页面
                    location.reload();
                }
            });
        }
    });
});
</script>
}

第二步：调整后端Create Action逻辑

要让后端在模型验证失败时返回分部视图，而不是重定向，这样前端才能拿到带错误提示的HTML：

// GET: 加载创建分部视图
[HttpGet]
public PartialViewResult Create()
{
    return PartialView();
}

// POST: 处理创建请求
[HttpPost]
public ActionResult Create(Employee model)
{
    if (ModelState.IsValid)
    {
        // 执行员工创建的保存逻辑
        // ...
        // 验证成功，返回JSON告知前端
        return Json(new { success = true });
    }
    // 验证失败，返回带错误信息的分部视图
    return PartialView(model);
}

第三步：确保验证脚本已引用

确认你的页面已经加载了ASP.NET MVC客户端验证必需的两个脚本：

jquery.validate.js
jquery.validate.unobtrusive.js

这两个脚本通常会在_Layout.cshtml里通过@Scripts.Render("~/bundles/jqueryval")引用，要是没有的话，手动加上就行。

效果说明

修改完成后：

点击创建按钮加载分部视图时，会自动初始化验证规则；
提交时先做客户端验证，字段为空或不符合要求时会立刻弹出错误提示；
如果后端模型验证失败（比如重复的员工编号），模态框会自动渲染带错误提示的分部视图，和普通视图的验证效果完全一致。

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