在ASP.NET Core 7 MVC中捕获通过客户端验证的表单提交事件

ASP.NET MVC .NET Core 7默认集成了jQuery Validate与jQuery Unobtrusive Validate来实现客户端表单验证，你可以利用这两个库提供的API精准判断表单是否通过验证，从而实现验证通过后禁用提交按钮的需求，具体有两种常用实现方式：

方式一：监听按钮点击事件，手动触发验证并判断结果 #

给提交按钮绑定点击事件，在事件中调用$(form).valid()方法——该方法会触发完整的客户端验证流程，并返回布尔值表示验证是否通过。若验证通过，直接禁用按钮即可；若未通过，不做额外处理，让默认的验证提示正常显示。

示例代码：

$(document).ready(function() {
    // 替换成你的提交按钮ID
    $('#submitBtn').click(function() {
        var $form = $('#yourFormId'); // 替换成你的表单ID
        if ($form.valid()) {
            // 禁用按钮，同时修改文本提示用户
            $(this).text('提交中...').prop('disabled', true);
        }
    });
});

方式二：利用jQuery Validate的submitHandler回调 #

jQuery Validate提供了submitHandler回调函数，这个函数仅会在表单验证通过时触发，完全契合你的需求。在回调内禁用提交按钮，再执行表单提交操作即可。

示例代码：

$(document).ready(function() {
    $('#yourFormId').validate({
        submitHandler: function(form) {
            // 替换成你的提交按钮ID
            $('#submitBtn').text('提交中...').prop('disabled', true);
            // 执行表单提交
            form.submit();
        }
    });
});

注意事项 #

• 确保页面已正确引入jQuery、jQuery Validate和jQuery Unobtrusive Validate脚本，ASP.NET MVC默认会在布局页（_Layout.cshtml）中自动引入这些依赖；
• 若使用Ajax.BeginForm实现异步提交，只需将form.submit()替换为对应的Ajax提交逻辑，禁用按钮的逻辑保持不变；
• 禁用按钮时修改文本（如改为"提交中..."），能提升用户体验，避免用户误以为页面无响应。

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