ASP.NET Core MVC Ajax提交时模型验证注解失效的解决方法

问题背景 #

开发ASP.NET Core MVC应用时，为避免表单提交后URL从Resignation/RequesterIndex?filenumber=103085变为Resignation/RequesterIndex，采用jQuery Ajax提交表单。当前Ajax提交成功且URL保持不变，但模型的[Required]等验证注解无法生效。移除e.preventDefault()后验证正常，但URL会发生变化，需求是：字段为空时显示必填验证错误，同时URL保持不变。

核心原因 #

e.preventDefault()直接阻止了表单的默认提交流程，包括ASP.NET MVC自带的客户端jQuery Validation触发逻辑，导致验证规则无法执行。

解决方案步骤 #

1. 修改Ajax提交逻辑，先触发客户端验证 #

保留e.preventDefault()阻止默认跳转，先调用表单的客户端验证方法，仅在验证通过时执行Ajax请求：

$("#ResignationApp").submit(function (e) {
    e.preventDefault(); // 阻止默认表单提交，保持URL不变

    var $form = $(this);
    // 触发客户端验证并检查结果
    if ($form.valid()) {
        var formData = $form.serialize();
        console.log("data is" + formData);
        $.ajax({
            type: "POST",
            url: '@Url.Action("RequesterIndex", "Resignation")',
            data: formData,
            success: function (response) {
                // 替换表单区域内容，渲染服务器返回的视图（包含错误/成功提示）
                var $responseForm = $(response).find("#ResignationApp");
                $form.html($responseForm.html());
                // 重新绑定验证规则（DOM更新后需重新解析）
                $form.removeData("validator").removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse($form);
            },
            error: function (error) {
                console.error(error);
            }
        });
    }
});

2. 确认客户端验证脚本加载正常 #

视图中已引用的@Scripts.Render("~/bundles/jqueryval")包含以下必要脚本，无需额外添加：

• jQuery核心库
• jQuery Validate插件
• jQuery Unobtrusive Validate插件（自动解析模型注解生成的验证规则）

3. 处理服务器端验证结果 #

当客户端验证通过但服务器端ModelState无效时，控制器返回的视图会包含错误提示（如ViewBag.errorMsg），通过Ajax成功回调中的视图替换逻辑，可将错误信息渲染到页面上。

关于valid()方法的说明 #

• $(form).valid()是jQuery Validate插件提供的方法，用于触发表单客户端验证并返回验证结果。
• 该方法依赖~/bundles/jqueryval中的脚本，无需额外引入其他资源。
• ASP.NET MVC使用的是Unobtrusive Validation，会自动根据模型注解生成验证规则，无需手动调用validate()方法；仅在DOM更新后，需要调用$.validator.unobtrusive.parse(form)重新解析验证规则。

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