ASP.NET Core 3.1 MVC Ajax表单自定义模型验证失效问题

我之前也碰到过一模一样的情况，咱们一步步拆解排查，应该能快速解决：

1. 先确认自定义验证器的客户端规则注册是否正确 #

自定义验证器要同时支持客户端和服务端，IClientModelValidator的实现和客户端JS适配器缺一不可，先检查这两部分：

服务器端验证器的AddValidation方法 #

确保你在ImportantAttribute里正确注入了验证标记和错误信息：

public class ImportantAttribute : ValidationAttribute, IClientModelValidator
{
    public ImportantAttribute()
    {
        ErrorMessage = "此字段为必填项，不能为空";
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        if (value == null || string.IsNullOrWhiteSpace(value.ToString()))
        {
            return new ValidationResult(ErrorMessage);
        }
        return ValidationResult.Success;
    }

    public void AddValidation(ClientModelValidationContext context)
    {
        if (context == null)
            throw new ArgumentNullException(nameof(context));

        // 标记此字段需要客户端验证
        MergeAttribute(context.Attributes, "data-val", "true");
        // 绑定自定义验证规则和错误提示
        MergeAttribute(context.Attributes, "data-val-important", ErrorMessage);
    }

    private bool MergeAttribute(IDictionary<string, string> attributes, string key, string value)
    {
        if (attributes.ContainsKey(key))
            return false;

        attributes.Add(key, value);
        return true;
    }
}

客户端JS验证适配器 #

要在正确的脚本顺序后添加自定义验证逻辑，确保脚本顺序是：jquery.js → jquery.validate.js → jquery.validate.unobtrusive.js → 你的自定义验证JS：

$(function () {
    // 添加自定义验证方法，逻辑要和服务器端保持一致
    $.validator.addMethod("important", function (value, element) {
        return $.trim(value) !== "";
    });

    // 注册适配器，关联HTML属性和验证方法
    $.validator.unobtrusive.adapters.add("important", [], function (options) {
        options.rules["important"] = true;
        options.messages["important"] = options.message;
    });
});

2. 手动Ajax提交要主动触发客户端验证 #

如果是自己写的$.ajax提交代码，默认不会自动触发客户端验证，必须手动调用：

$("#your-form-id").submit(function (e) {
    e.preventDefault();
    var form = $(this);

    // 先触发客户端验证，验证不通过就直接返回
    form.validate();
    if (!form.valid()) {
        return;
    }

    // 验证通过后发送Ajax请求
    $.ajax({
        url: form.attr("action"),
        type: form.attr("method"),
        data: form.serialize(),
        success: function (response) {
            handleAjaxResponse(response, form);
        },
        error: function () {
            alert("提交过程中出现错误，请稍后重试");
        }
    });
});

3. 服务器端返回错误后，前端要手动渲染提示 #

如果客户端验证通过，但服务器端ModelState仍有错误（比如一些只能在服务端做的验证），需要在Action里返回结构化的错误信息，再让前端渲染到对应字段：

服务器端Action #

[HttpPost]
public IActionResult SubmitForm(YourViewModel model)
{
    if (!ModelState.IsValid)
    {
        // 整理每个字段的错误信息，方便前端定位
        var fieldErrors = ModelState
            .Where(kvp => kvp.Value.Errors.Any())
            .ToDictionary(
                kvp => kvp.Key,
                kvp => kvp.Value.Errors.First().ErrorMessage
            );

        return Json(new { Success = false, FieldErrors = fieldErrors });
    }

    // 这里写业务逻辑处理
    return Json(new { Success = true, Message = "提交成功！" });
}

前端处理返回的错误 #

function handleAjaxResponse(response, form) {
    // 先清除之前的错误提示和样式
    form.find(".text-danger").remove();
    form.find(".form-control").removeClass("is-invalid");

    if (!response.Success) {
        // 遍历每个字段错误，添加到对应字段下方
        $.each(response.FieldErrors, function (fieldName, errorMsg) {
            var field = form.find("[name='" + fieldName + "']");
            field.after(`<span class="text-danger">${errorMsg}</span>`);
            field.addClass("is-invalid");
        });
    } else {
        // 处理成功逻辑，比如重置表单或显示提示
        alert(response.Message);
        form[0].reset();
    }
}

4. 检查脚本引用顺序 #

这是很容易踩坑的点，必须保证脚本顺序正确：

1. jquery.js
2. jquery.validate.js
3. jquery.validate.unobtrusive.js
4. 你的自定义验证JS脚本

如果顺序错了，自定义验证适配器无法正确注册，客户端验证直接失效。

5. 用Ajax.BeginForm的额外注意事项 #

如果你用的是MVC自带的Ajax.BeginForm，还要确保：

• 引用了jquery.unobtrusive-ajax.js
• 在_Layout.cshtml中添加了TagHelper：@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
• 自定义验证的JS仍然需要按照前面的步骤正确注册

按照这些步骤排查下来，应该就能解决Ajax提交时自定义验证错误不显示的问题了。

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