如何阻止Razor页面表单在输入值为XXX时提交并显示验证错误

问题根源 #

你的代码存在两个关键问题，导致错误提示无法正常展示：

1. ModelState错误键不匹配：ModelState.AddModelError使用的键"FROMLOCATION"和视图中asp-validation-for="Item.FromLocation"的字段名不对应，错误信息无法绑定到对应的提示元素上。
2. 验证顺序不合理：先检查ModelState.IsValid再执行Location验证，不符合验证逻辑的常规流程，可能导致无效场景下的逻辑执行风险。

修复步骤 #

1. 修正ModelState错误键 #

将添加错误的代码改为匹配视图字段名的键，推荐用nameof避免硬编码错误：

ModelState.AddModelError(nameof(Item.FromLocation), "Invalid Location");

或者直接使用字段完整名称：

ModelState.AddModelError("Item.FromLocation", "Invalid Location");

2. 调整验证逻辑顺序 #

把Location验证移到ModelState.IsValid检查之前，确保所有验证完成后再判断是否执行后续业务逻辑：

public async Task<IActionResult> OnPost(ItemModel item)
{
    ValidLocation = await LocationModel.CreateAsync(item.FromLocation);

    // 先执行Location验证，将错误添加到ModelState
    if (ValidLocation.Location == "XXX")
    {
        ModelState.AddModelError(nameof(Item.FromLocation), "Invalid Location");
    }

    // 检查所有验证是否通过（包括内置验证和自定义Location验证）
    if (!ModelState.IsValid)
    {
        return Page();
    }

    // 验证通过后执行插入操作
    if (await item.InsertAsync())
    {
        return RedirectToPage("Add", new { item.EntryDate, item.Initials });
    }
    else
    {
        return RedirectToPage("Error");
    }
}

3. 确保验证脚本引入（可选） #

如果需要客户端提前阻止无效提交，确保页面中引入Unobtrusive验证脚本：

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

修复后，当Location验证返回"XXX"时，错误信息会正确显示在输入框下方，同时服务端会终止后续插入逻辑并返回当前页面，效果和必填字段为空时完全一致。

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