ASP.NET Core Razor页面Password字段客户端验证错误消息隐藏问题

核心错误点 #

1. ConfirmPassword验证绑定错误
   你在ConfirmPassword字段的验证辅助线div中，错误地将asp-validation-for绑定到了Input.Password，导致验证框架无法将错误消息关联到正确的字段容器，直接造成提示隐藏。

2. MDC样式与ASP.NET验证类不兼容
   MDC文本框需要mdc-text-field--invalid类才能显示错误提示，但ASP.NET客户端验证仅给输入框添加input-validation-error类，两者无自动关联，导致样式不触发。

修复步骤 #

1. 修正ConfirmPassword的验证绑定

修改ConfirmPassword对应的验证div属性：

<div>
    <label class="mdc-text-field mdc-text-field--outlined register-form-component" style="width: 60%; display: block; margin: auto" asp-for="Input.ConfirmPassword">
        <span class="mdc-notched-outline">
            <span class="mdc-notched-outline__leading"></span>
            <span class="mdc-notched-outline__notch">
                <span class="mdc-floating-label" id="confirm-password-id">Potwierdź hasło</span>
            </span>
            <span class="mdc-notched-outline__trailing"></span>
        </span>
        <input type="password" asp-for="Input.ConfirmPassword" class="mdc-text-field__input" aria-labelledby="confirm-password-id">
    </label>
    <!-- 修正asp-validation-for为Input.ConfirmPassword -->
    <div class="mdc-text-field-helper-line register-form-component" asp-validation-for="Input.ConfirmPassword">
        <span asp-validation-for="Input.ConfirmPassword" class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"></span>
    </div>
</div>

2. 关联ASP.NET验证类与MDC错误样式

添加CSS让ASP.NET的错误类触发MDC的错误状态：

/* 当输入框存在验证错误时，显示MDC错误提示 */
.input-validation-error ~ .mdc-text-field-helper-text.mdc-text-field-helper-text--validation-msg {
    display: block !important;
    color: var(--mdc-theme-error, #b00020);
}

/* 给父级文本框添加错误边框样式 */
.mdc-text-field:has(.input-validation-error) {
    --mdc-text-field-outline-color: var(--mdc-theme-error, #b00020);
}

若浏览器不支持:has()选择器，改用JavaScript实现：

$(document).ready(function() {
    // 表单验证失败时添加MDC错误类
    $('form').on('invalid-form.validate', function() {
        $(this).find('.input-validation-error').each(function() {
            $(this).closest('.mdc-text-field').addClass('mdc-text-field--invalid');
        });
    });

    // 输入时清除错误状态
    $('input').on('input', function() {
        $(this).closest('.mdc-text-field').removeClass('mdc-text-field--invalid');
    });
});

3. 确认验证脚本已引入

确保页面包含ASP.NET客户端验证所需的脚本：

<script src="~/lib/jquery/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>

验证效果 #

完成修改后，测试以下场景：

• 提交空表单，Password和ConfirmPassword的必填提示应正常显示
• 输入长度不足6位的密码，触发StringLength错误提示
• 两次输入密码不一致，ConfirmPassword的对比错误提示显示

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