ASP.NET Razor页面表单重置时验证消息无法清除及验证提示异常问题

看起来你在ASP.NET Razor页面的表单验证和重置功能上遇到了几个小问题——原生验证弹窗、重置后验证消息残留、不同验证方式的提示不一致，我来帮你一步步解决这些问题：

首先，拆解你的核心问题： #

1. 原生required属性触发了浏览器默认弹窗，你想显示自定义提示而非弹窗
2. 点击Reset按钮后，jQuery Unobtrusive Validation生成的提示消息（比如firstname的）无法被清除
3. 部分输入框的验证提示关联逻辑不正确，导致提示不显示

完整修改后的代码方案 #

我把所有修正点整合到了下面的代码中，每一处修改都有对应的说明：

1. 页面HTML（含CSS）

@page
@model Products.Pages.IndexModel
@{
    ViewData["Title"] = "Input Validation Demo";
}

<style>
    /* 控制自定义验证提示的显示逻辑：默认隐藏，输入框无效时显示 */
    label[for="username"], 
    span[for="lastname"] {
        display: none;
        color: #dc3545; /* 用Bootstrap的错误色保持统一 */
        margin-left: 5px;
    }

    /* 当输入框处于invalid状态时，显示对应的提示 */
    #username:invalid ~ label[for="username"],
    #lastname:invalid ~ span[for="lastname"] {
        display: inline-block;
    }

    /* 禁用浏览器默认的验证弹窗，完全改用自定义提示 */
    #myForm {
        novalidate: true;
    }
</style>

@Html.AntiForgeryToken()
<form id="myForm" novalidate>
    <!-- Username：原生required + 自定义label提示 -->
    <input type="text" id="username" required>
    <label for="username">Username required</label>
    <br />

    <!-- FirstName：jQuery Unobtrusive Validation 方式 -->
    <input type="text" id="firstname" name="firstname" 
           data-val="true" data-val-required="First Name REQUIRED">
    <span data-valmsg-for="firstname" data-valmsg-replace="true"></span>
    <br />

    <!-- LastName：结合原生required和自定义提示，对齐firstname的提示结构 -->
    <input type="text" id="lastname" name="lastname" required>
    <span data-valmsg-for="lastname" data-valmsg-replace="true">last name required</span>
    <br />

    <button id="btnconfirm" class="button" type="submit">Check inputs</button>
    <input type="reset" id="resetForm" value="Reset">
</form>

2. Scripts 部分（修正重置和提交逻辑）

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }

    <script>
        $(function() {
            var $form = $("#myForm");
            // 初始化表单验证（jQuery Unobtrusive会自动处理，但手动确保初始化）
            $form.validate();

            // 处理提交事件：阻止默认行为，手动触发验证，禁用浏览器弹窗
            $form.on('submit', function(e) {
                e.preventDefault();
                var isValid = $form.valid();
                
                if (isValid) {
                    // 验证通过后的逻辑，比如提交表单或提示
                    alert("All inputs are valid!");
                }
            });

            // 处理重置事件：清除所有验证状态和提示
            $("#resetForm").click(function() {
                var validator = $form.validate();
                
                // 1. 重置jQuery Validation的验证状态
                validator.resetForm();
                // 2. 清除所有Unobtrusive Validation的提示消息
                $form.find('[data-valmsg-for]')
                     .text('')
                     .removeClass('field-validation-error')
                     .addClass('field-validation-valid');
                // 3. 清除原生验证的invalid状态和自定义提示
                $form.find(':input')
                     .removeClass('input-validation-error')
                     .each(function() {
                         this.setCustomValidity('');
                     });
                // 4. 执行原生重置，清空输入框
                $form[0].reset();
                
                alert("reset");
            });
        });
    </script>
}

关键修改点说明 #

1. 禁用浏览器原生验证弹窗：给表单加novalidate属性，配合CSS控制自定义提示的显示，彻底替代浏览器默认弹窗。
2. 统一验证提示结构：把lastname的提示改成和firstname一致的data-valmsg-for结构，确保jQuery Unobtrusive Validation能正确控制其显示。
3. 完善重置逻辑：
   • 不仅调用validator.resetForm()，还要手动清除所有验证消息的文本和样式类
   • 重置输入框的原生invalid状态，避免下次输入时提示残留
   • 最后执行原生重置清空内容
4. 手动触发提交验证：通过e.preventDefault()阻止默认提交，用$form.valid()手动触发验证，完全控制验证流程。

这样修改后，你的表单就能实现：自定义验证提示无弹窗、点击Reset后所有验证消息和状态都被清除、三种输入框的验证行为统一。

内容来源于stack exchange