ASP.NET Core Razor页面客户端验证异常问题求助

核心问题分析 #

1. 验证摘要仅POST后显示：默认的jQuery非侵入式验证不会自动将客户端验证错误同步到asp-validation-summary容器，需手动监听验证事件更新内容。
2. 验证触发逻辑异常：字段初始为readonly状态时，jQuery Validate会跳过该字段的规则注册；移除readonly后需重新解析验证规则，才能正常触发验证。

具体修改步骤 #

1. 调整表单结构

• 将<DataAnnotationsValidator />移至<form>内部最上方，确保验证组件正确初始化。
• 移除输入框上的aspNetDisabled类，避免干扰验证逻辑。

修改后的表单代码片段：

<form asp-page-handler="post" method="post">
    <DataAnnotationsValidator />
    <div asp-validation-summary="All" role="alert" id="validationSummary">You received the following errors:</div>
    <label asp-for="DetailInfo.Manufacturer">Manufacturer: </label>
    <input id="Manufacturer" readonly="@(Model.EditMode ? null : "readonly")" asp-for="DetailInfo.Manufacturer" class="form-control">
    <span asp-validation-for="DetailInfo.Manufacturer" class="formNotes formAlerts"></span>
    
    <!-- 按钮组代码保持不变 -->
    <div class="btnGroup @(Model.EditMode ? "visiblyHidden" : "")">
        <input asp-page-handler="EditDetail" formnovalidate type="submit" name="btnUpdate" value="Edit" id="btnUpdate" title="Edit">
        <input asp-page-handler="CancelInitialEditDetail" formnovalidate type="submit" name="btnCancelInitial" value="Cancel" id="btnCancelInitial" title="Cancel">
    </div>
    <div class="btnGroup @(Model.EditMode ? "" : "visiblyHidden")">
        <input asp-page-handler="SaveDetails" type="submit" name="btnSave" value="Save" id="btnSave" title="Save">
        <input asp-page-handler="ShowDetails" formnovalidate type="submit" name="btnCancelFinal" value="Cancel" id="btnCancelFinal" title="Cancel">
    </div>
</form>

2. 添加自定义验证处理脚本

在页面的Scripts区域添加以下代码，解决验证触发和摘要显示问题：

@section Scripts
{
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
    <script>
        $(function() {
            // 编辑按钮点击后，重新绑定验证规则
            $('#btnUpdate').on('click', function() {
                const form = $('form');
                const manufacturerInput = $('#Manufacturer');
                
                // 移除只读属性
                manufacturerInput.removeAttr('readonly');
                // 重置验证器并重新解析非侵入式规则
                form.data('validator', null);
                $.validator.unobtrusive.parse(form);
            });

            // 监听表单验证失败事件，更新验证摘要
            $('form').on('invalid-form.validate', function(e, validator) {
                const summary = $('#validationSummary');
                summary.empty().append('<p>You received the following errors:</p>');
                
                if (validator.errorList.length > 0) {
                    const errorList = $('<ul></ul>');
                    validator.errorList.forEach(error => {
                        errorList.append($('<li></li>').text(error.message));
                    });
                    summary.append(errorList).show();
                } else {
                    summary.hide();
                }
            });

            // 监听字段输入/失焦事件，实时触发验证
            $('form').on('focusout keyup', 'input', function() {
                $('form').valid();
            });
        });
    </script>
}

代码说明 #

• 重新绑定验证规则：点击编辑按钮后，重置表单验证器并重新解析规则，确保Validate识别字段的必填约束。
• 同步验证摘要：监听表单验证失败事件，动态生成错误列表插入摘要容器，实现客户端验证时实时显示。
• 实时触发验证：监听字段的focusout和keyup事件，主动触发表单验证，确保内容变化时及时显示错误。

内容的提问来源于stack exchange，提问作者L. Wallach