如何在ASP.NET Core中实现AJAX校验错误的表单字段内联展示

问题根因 #

你的提交按钮放在<form>标签内部，点击时会触发表单的默认提交行为，导致页面刷新跳转，因此AJAX返回的错误信息还没渲染，页面就已经重新加载了。

修复方案 #

1. 阻止表单默认提交行为 #

给点击事件添加preventDefault()取消默认提交，页面就会停留在当前页。

2. 内联错误展示优化 #

你可以直接复用表单字段旁自带的asp-validation-for提示容器展示错误，不用额外使用只读输入框，符合内联展示的需求。

完整修改后的代码 #

JS部分修改

$("#button").click(function (e) {
    // 新增：阻止表单默认提交行为
    e.preventDefault();

    // 可选：提交前清空上一次的错误提示
    $("span[data-valmsg-for='OrderQuantity']").text("");
    $("#errorMessage").val("");

    var orderedQuantity = $("#txt").val();
    var orderId = $("#orderId").val();
    var data = {
        orderId: orderId,
        orderedQuantity: orderedQuantity
    };

    $.ajax({
        type: 'POST',
        url: '@Url.Action("EditItem", "Orders")',
        data: data,
        dataType: "json",
        success: function (result) {
            if (result.status === "NotAvailable") {
                // 把错误写到OrderQuantity字段旁的验证提示span中，实现内联展示
                $("span[data-valmsg-for='OrderQuantity']").text("Enter a valid Quantity");
                // 如果需要保留顶部错误输入框的展示，保留下面这行即可
                // $("#errorMessage").val("Enter a valid Quantity");
            }
            else {
                var url = '@Url.Action("Index", "Orders")';
                window.location.href = url + "?custEmail=xyz@rrr.org";
            }
        },
        error: function (error) {
            alert(error);
        }
    });
});

修改完成后校验失败时页面不会跳转，错误信息会直接展示在OrderQuantity输入框的下方。

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