ASP.NET Core列表项客户端验证失效问题求助

1. 修复HTML结构错误 #

你当前的代码将<form>直接放在<tr>外层，不符合HTML规范，浏览器解析时会打乱DOM结构，导致验证脚本无法正确关联表单元素。调整结构，将表单嵌入表格行内部：

<table>
    <thead>
        <tr>
            <th>全名</th>
            <th>出生年份</th>
            <th>操作</th>
            <th>验证提示</th>
        </tr>
    </thead>
    <tbody>
        @for(int index = 0; index < Model.PersonList.Count; index++)
        {
            <tr>
                <form id="form-@index" method="post">
                    <td>
                        @Html.HiddenFor(model => model.PersonList[index].Id)
                        @Html.TextBoxFor(model => model.PersonList[index].FullName)
                        @Html.ValidationMessageFor(model => model.PersonList[index].FullName)
                    </td>
                    <td>
                        @Html.TextBoxFor(model => model.PersonList[index].YearOfBirth)
                    </td>
                    <td>
                        <input type="submit" value="更新" asp-page-handler="UpdatePerson" />
                    </td>
                    <td>
                        @Html.ValidationMessageFor(model => model.PersonList[index].YearOfBirth)
                    </td>
                </form>
            </tr>
        }
    </tbody>
</table>

若部分浏览器对<tr>内嵌套<form>兼容不佳，可改用HTML5的form属性，将表单放在表格外，元素通过属性关联：

<table>
    <thead>
        <tr>
            <th>全名</th>
            <th>出生年份</th>
            <th>操作</th>
            <th>验证提示</th>
        </tr>
    </thead>
    <tbody>
        @for(int index = 0; index < Model.PersonList.Count; index++)
        {
            <tr>
                <td>
                    <input type="hidden" asp-for="PersonList[index].Id" form="form-@index" />
                    <input asp-for="PersonList[index].FullName" form="form-@index" />
                    <span asp-validation-for="PersonList[index].FullName" form="form-@index"></span>
                </td>
                <td>
                    <input asp-for="PersonList[index].YearOfBirth" form="form-@index" />
                    <span asp-validation-for="PersonList[index].YearOfBirth" form="form-@index"></span>
                </td>
                <td>
                    <input type="submit" value="更新" asp-page-handler="UpdatePerson" form="form-@index" />
                </td>
            </tr>
        }
    </tbody>
</table>

@for(int index = 0; index < Model.PersonList.Count; index++)
{
    <form id="form-@index" method="post"></form>
}

2. 引入客户端验证核心脚本 #

客户端验证依赖三个脚本：jQuery、jQuery Validate、jQuery Validate Unobtrusive。在页面</body>标签前添加引用（若布局页_Layout.cshtml已包含可跳过）：

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

3. 确认客户端验证配置启用 #

在Program.cs中显式配置确保客户端验证开启（默认已启用，手动配置可避免潜在问题）：

builder.Services.AddRazorPages()
    .AddViewOptions(options =>
    {
        options.HtmlHelperOptions.ClientValidationEnabled = true;
        options.HtmlHelperOptions.UnobtrusiveJavaScriptEnabled = true;
    });

4. 手动初始化验证规则（可选） #

若服务器生成的表单元素未自动绑定验证，可在页面末尾添加脚本，强制初始化验证并设置失焦触发：

<script>
    $(function() {
        $('form[id^="form-"]').each(function() {
            $(this).validate({
                onfocusout: function(element) {
                    $(element).valid();
                }
            });
        });
    });
</script>

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