MVC中jQuery Validation仅在嵌套局部视图中失效问题咨询

我帮你分析下这个问题：核心原因是jQuery Validate默认只在页面首次加载时扫描并初始化所有表单，而你通过Ajax加载的局部视图表单是后续才插入到DOM中的，所以没有被自动绑定验证规则。另外你在局部视图里重复引入了jQuery和验证脚本，这也可能导致冲突，先把这个问题解决掉，再给你几个可行的修复方案：

第一步：移除局部视图中的重复脚本 #

先把局部视图末尾的这三个<script>标签删掉——主页面肯定已经加载过这些脚本了，重复引入会覆盖原有实例，反而导致验证失效：

<script src="~/Scripts/jquery-3.4.1.min.js"></script> 
<script src="~/Scripts/jquery.validate.min.js"></script> 
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

方案一：利用Ajax回调手动初始化验证 #

修改主视图里的Ajax.BeginForm，添加OnSuccess回调函数，在局部视图加载完成后手动触发验证初始化：

1. 调整主视图的AjaxOptions #

@using (Ajax.BeginForm("AnsComm", new { ProdductID = item.ProductID, CommentID = item.ID }, new AjaxOptions { 
    HttpMethod ="POST", 
    LoadingElementId = "LoadingAns", 
    UpdateTargetId = "DivAns",
    OnSuccess = "reinitializeCommentValidation" // 新增回调
})) { 
    <input type="submit" value="answer" /> 
    <div id="DivAns"></div> 
}

2. 在主页面定义回调函数 #

在主页面的脚本区域添加这段代码，专门处理新加载表单的验证初始化：

function reinitializeCommentValidation() {
    // 先移除已有的验证绑定，避免重复初始化导致异常
    const $targetForm = $('#DivAns form');
    $targetForm.removeData('validator').removeData('unobtrusiveValidation');
    // 重新解析并绑定验证规则
    $.validator.unobtrusive.parse($targetForm);
}

方案二：全局监听Ajax完成事件（适合多表单场景） #

如果你的页面有多个通过Ajax加载的表单，可以全局监听Ajax完成事件，自动为所有新插入的表单初始化验证，不用逐个加回调：

$(document).ajaxComplete(function() {
    // 找到所有未标记为已验证的表单
    $('form').not('[data-val="true"]').each(function() {
        $(this).removeData('validator').removeData('unobtrusiveValidation');
        $.validator.unobtrusive.parse($(this));
    });
});

方案三：在局部视图末尾添加初始化脚本 #

如果你不想修改主视图的Ajax配置，也可以在局部视图的表单代码后面加一段初始化脚本（注意不要重复加载核心库）：

@model honar.Models.Domain.Tbl_Comments 
@using (Ajax.BeginForm(new AjaxOptions { Url = "/Home/InsertComment", HttpMethod = "POST", LoadingElementId = "Loading", UpdateTargetId = "Msg" })) {
    @Html.AntiForgeryToken() 
    <div id="Msg" style=""></div> 
    <div class="form-horizontal"> 
        @Html.ValidationSummary(true) 
        @Html.HiddenFor(model => model.ProductID) 
        <div class="form-group"> 
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" }) 
            <div class="col-md-10"> 
                @Html.EditorFor(model => model.Name) 
                @Html.ValidationMessageFor(model => model.Name) 
            </div> 
        </div>
    </div>
}
<script>
    // 确保DOM加载完成后执行初始化
    $(function() {
        const $currentForm = $(this).closest('form');
        $currentForm.removeData('validator').removeData('unobtrusiveValidation');
        $.validator.unobtrusive.parse($currentForm);
    });
</script>

关键注意事项 #

• 永远不要在局部视图中重复加载jQuery、jquery.validate和jquery.validate.unobtrusive脚本，这是最常见的坑；
• 重新初始化验证前，一定要先移除已有的validator和unobtrusiveValidation数据，避免重复绑定引发的各种异常。

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