Razor多表单行内验证失效：输入框失焦时未显示验证消息

1. 修正HTML结构 #

HTML规范不允许<form>直接包裹<tr>，这种结构会导致浏览器解析异常，破坏客户端验证逻辑。调整表单位置，将其放入<td>内：

<tbody>
@foreach (var item in Model.ItemList) {
    <tr>
        <td>..</td>
        <td>
            <form method="post">
                <input type="hidden" asp-for="@item.Identifier" />
                <input asp-for="@item.PropertyToUpdate" 
                       class="form-control" 
                       min="0" 
                       max="@item.MaxValue" 
                       id="PropertyToUpdate_@item.Identifier"
                       data-val="true"
                       data-val-range="输入值必须在0和@item.MaxValue之间"
                       data-val-range-max="@item.MaxValue"
                       data-val-range-min="0" />
                
                <span asp-validation-for="@item.PropertyToUpdate" class="text-danger"></span>
                <input type="submit" value="Submit" class="btn btn-primary" />
            </form>
        </td>
    </tr>
}
</tbody>

2. 补充服务器端动态验证 #

由于MaxValue是每个条目的动态值，无法使用常量参数的[Range]特性，需在提交Action中手动验证：

[HttpPost]
public IActionResult UpdateItem(ItemModel submittedModel)
{
    var targetItem = FetchItemById(submittedModel.Identifier); // 根据ID获取对应条目
    if (submittedModel.PropertyToUpdate < 0 || submittedModel.PropertyToUpdate > targetItem.MaxValue)
    {
        ModelState.AddModelError(nameof(submittedModel.PropertyToUpdate), 
                                $"输入值必须在0和{targetItem.MaxValue}之间");
        return View(YourPageModel); // 返回原页面并保留错误信息
    }
    // 执行更新操作
    return RedirectToAction(nameof(Index));
}

3. 确保引入客户端验证依赖脚本 #

ASP.NET Core的非侵入式验证需要以下3个脚本，必须在页面（或布局页）底部引入：

<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>

4. 修复重复ID问题 #

之前手动设置的id="@item.PropertyToUpdate"会导致所有输入框ID重复，干扰验证脚本的DOM选择。改用条目唯一标识生成ID，确保每个输入框ID唯一：

id="PropertyToUpdate_@item.Identifier"

5. 强制触发失焦验证 #

如果仍不显示实时验证，可给输入框添加onblur事件手动触发验证：

<input asp-for="@item.PropertyToUpdate" 
       ...
       onblur="$(this).valid()" />

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