Razor Page中jQuery验证通过后提交表单时显示加载动画

你的问题核心在于当前提交事件未做验证判断就直接触发了加载模态框，只需在提交时先通过jQuery Validate的验证方法确认表单合法性，再决定是否显示动画即可。

修正后的代码 #

替换原有<script>部分为以下代码：

$(document).ready(function () {
    $('#settings').on("submit", function (e) {
        // 先触发表单验证并检查结果
        if ($(this).valid()) {
            // 验证通过，显示加载模态框
            $('#updating').modal('show');
        } else {
            // 验证失败，阻止表单提交且不显示加载动画
            e.preventDefault();
        }
    });
});

关键说明 #

• 绑定表单ID#settings比通用的$('form')更精准，避免影响页面其他表单
• $(this).valid()会触发jQuery Validate的所有验证规则，返回true代表所有字段符合要求
• 验证失败时调用e.preventDefault()阻止表单提交，同时不展示加载模态框，让用户能清晰看到验证错误提示
• 需确保_ValidationScriptsPartial已正确引入jQuery Validate和Microsoft jQuery Unobtrusive Validation脚本，这是valid()方法生效的前提

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