.NET Core中通过Ajax验证后手动触发asp-validation-for错误提示

问题场景 #

在.NET Core项目中，通过Ajax异步检查输入的CentreId是否存在于数据库，但尝试以下两种方式均无法正常显示验证错误：

1. 使用jQuery Validate的showErrors方法
2. 手动添加验证错误类并设置错误文本

现有代码如下：

HTML部分 #

<div class="form-group Centre">
    <label asp-for="Input.CentreId"></label>
    <input asp-for="Input.CentreId" class="form-control" id="CentreInput" />
    <span asp-validation-for="Input.CentreId" class="text-danger" id="CentreError"></span>
</div>

Ajax代码 #

$("#CentreInput").on('change', function (event) {
    var urlVal = $(location).attr('href') + "?handler=CheckCentre"

    $.ajax({
        type: "POST",
        url: urlVal,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("RequestVerificationToken",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        data: {
            "CentreId": $("#CentreInput").val()
        },
        async: false,
        success: function (response) {
            debugger;
            var $validator = $("#RegisterForm").validate();
            if (response.message == 'Not Found') {
                errors = { CentreInput: "Centre does not exist in database" };
                $validator.showErrors(errors);
            }
            else if (response.message == 'Success') {
                $("#CentreNameInput").val() = response.centreName;
            }
            else {
                alert(JSON.stringify(response));
            }
            
        },
        failure: function (response) {
            debugger;
            alert(JSON.stringify(response));
        },
        error: function (response) {
            debugger;
            alert(JSON.stringify(response));
        }
    });
});

尝试过的无效代码 #

$("#CentreInput").addClass("input-validation-error");
$("#CentreError").addClass("field-validation-error");
$("#CentreError").val() = "Centre does not exist in database"

解决方案 #

核心问题分析 #

1. jQuery Validate依赖字段name而非id：输入框的name属性是Input.CentreId（由asp-for生成），但错误对象中用了CentreInput（id），导致插件无法匹配字段。
2. span元素赋值错误：<span>没有value属性，不能用val()赋值，需用text()或html()。
3. val()方法语法错误：$("#CentreNameInput").val() = ...是错误写法，正确应为$("#CentreNameInput").val(response.centreName)。

方法1：手动操作DOM显示错误（最直接） #

直接修改DOM元素的类和文本，适配.NET默认的验证样式：

$("#CentreInput").on('change', function (event) {
    var urlVal = $(location).attr('href') + "?handler=CheckCentre"

    $.ajax({
        type: "POST",
        url: urlVal,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("RequestVerificationToken",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        data: {
            "CentreId": $("#CentreInput").val()
        },
        success: function (response) {
            // 先清除之前的错误状态
            $("#CentreInput").removeClass("input-validation-error");
            $("#CentreError")
                .removeClass("field-validation-error")
                .addClass("field-validation-valid")
                .text("");

            if (response.message == 'Not Found') {
                // 添加错误样式并设置错误文本
                $("#CentreInput").addClass("input-validation-error");
                $("#CentreError")
                    .removeClass("field-validation-valid")
                    .addClass("field-validation-error")
                    .text("Centre does not exist in database");
            }
            else if (response.message == 'Success') {
                // 修正val()赋值语法
                $("#CentreNameInput").val(response.centreName);
            }
            else {
                alert(JSON.stringify(response));
            }
            
        },
        failure: function (response) {
            alert(JSON.stringify(response));
        },
        error: function (response) {
            alert(JSON.stringify(response));
        }
    });
});

方法2：正确使用jQuery Validate插件 #

如果依赖jQuery Validate进行表单验证，需确保字段匹配正确，并初始化插件：

1. 先初始化表单验证：

$(function() {
    $("#RegisterForm").validate({
        rules: {
            // 用name属性而非id
            "Input.CentreId": {
                required: true
            }
        },
        errorPlacement: function(error, element) {
            // 指定错误信息显示到对应的span
            error.appendTo($("#CentreError"));
        }
    });
});

2. 修改Ajax中的错误触发逻辑：

success: function (response) {
    var $validator = $("#RegisterForm").validate();
    if (response.message == 'Not Found') {
        // 用name属性作为键
        var errors = { "Input.CentreId": "Centre does not exist in database" };
        $validator.showErrors(errors);
    }
    else if (response.message == 'Success') {
        $("#CentreNameInput").val(response.centreName);
        // 清除该字段的错误
        $validator.hideErrorsFor("Input.CentreId");
    }
    else {
        alert(JSON.stringify(response));
    }
},

方法3：结合.NET Unobtrusive Validation #

如果项目使用了.NET自带的jquery.validate.unobtrusive.js，可以直接调用内置验证机制：

success: function (response) {
    var form = $("#RegisterForm")[0];
    var validator = $(form).data("validator");

    if (response.message == 'Not Found') {
        validator.showErrors({
            "Input.CentreId": "Centre does not exist in database"
        });
    }
    else if (response.message == 'Success') {
        $("#CentreNameInput").val(response.centreName);
        validator.hideErrorsFor("Input.CentreId");
    }
    else {
        alert(JSON.stringify(response));
    }
},

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