ASP.NET Core中使用Ajax提交表单时验证消息不显示的解决方法

问题根源 #

1. 后端在ModelState无效时返回View(model)，但Ajax请求设置了dataType: 'json'，会导致JSON解析失败——因为返回的是完整HTML视图而非JSON格式的错误信息。
2. 前端没有逻辑将后端返回的错误信息更新到对应的验证提示标签中。
3. Ajax提交前未触发ASP.NET Core自带的客户端验证，跳过了本地校验环节。

解决方案步骤 #

1. 修改后端Action，返回JSON格式的验证错误 #

将返回View的逻辑改为返回包含ModelState错误的JSON，让Ajax能正确接收并处理：

[HttpPost]
public async Task<IActionResult> Index([FromBody] AddTaskViewModel model)
{
    try
    {
        if (!ModelState.IsValid)
        {
            // 生成带字段映射的错误字典，方便前端定位对应输入框
            var fieldErrors = ModelState.Where(x => x.Value.Errors.Any())
                                        .ToDictionary(
                                            kvp => kvp.Key,
                                            kvp => kvp.Value.Errors.First().ErrorMessage
                                        );
            return BadRequest(new { success = false, errors = fieldErrors });
        }

        // 验证通过后的业务逻辑（如保存数据）
        return Ok(new { success = true, message = "任务添加成功" });
    }
    catch (Exception ex)
    {
        return StatusCode(500, new { success = false, message = "服务器处理出错" });
    }
}

2. 确保前端引入必要的验证脚本 #

ASP.NET Core的非侵入式验证依赖以下脚本，需在视图（或布局页）中引入：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

3. 修改Ajax提交逻辑，处理客户端验证和后端错误 #

更新JS代码，先触发客户端验证，通过后再发送Ajax请求；拿到后端错误后，将错误信息渲染到对应字段的提示标签中：

$("#AddTaskForm").submit(function (event) {
    event.preventDefault();
    var $form = $(this);

    // 重置之前的验证状态，避免错误信息残留
    $form.find('.text-danger').text('').hide();
    $form.find('.is-invalid').removeClass('is-invalid');

    // 先触发客户端验证，不通过则直接返回（此时验证消息会自动显示）
    if (!$form.valid()) {
        return;
    }

    // 简化表单数据收集，无需手动逐个取值
    var formData = $form.serializeArray();
    var data = {};
    $.each(formData, function(index, item) {
        data[item.name] = item.value;
    });
    data.ID = "1"; // 手动设置ID（如有需要）

    $.ajax({
        type: 'POST',
        url: '@Url.Action("Index","ManageTasks")',
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function (result) {
            if (result.success) {
                console.log(result.message);
                // 成功后的逻辑：清空表单、提示用户等
                $form[0].reset();
            } else {
                // 遍历后端返回的字段错误，更新对应验证提示
                $.each(result.errors, function(fieldName, errorMessage) {
                    var $validationSpan = $form.find(`span[data-valmsg-for="${fieldName}"]`);
                    $validationSpan.text(errorMessage).show();
                    // 给输入框添加错误样式（可选）
                    $form.find(`input[name="${fieldName}"], textarea[name="${fieldName}"]`).addClass('is-invalid');
                });
            }
        },
        error: function() {
            console.log("请求失败，请稍后重试");
        }
    });
});

关键说明 #

• 客户端验证优先：通过$form.valid()触发本地验证，减少不必要的后端请求，提升用户体验。
• 结构化错误返回：后端返回带字段名的错误字典，前端可精准定位到对应输入框的验证提示。
• Ajax适配：Ajax请求需要结构化数据（JSON）而非完整HTML页面，这样前端能灵活处理返回结果。

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