javascript - 发现由于验证错误，表单未发布到服务器

Question

我有一个带验证的基本 ASP.NET MVC 表单。验证是使用 View 模型中的属性/数据注释实现的，我的网站配置为在客户端和服务器端都执行验证。我认为这是一种非常常见的模式。

表单是使用普通回发提交的；所以没有涉及ajax。

有时处理表单需要一些时间，所以我想在处理过程中显示一个微调器。我已经使用 javascript 实现了显示和隐藏微调器的必要代码。

我使用 jquery 在提交表单时显示微调器。

$('form').submit(function () {
     showSpinner();
});

显示微调器，如果一切顺利，页面将刷新，微调器将消失。无需调用我的 hideSpinner() javascript 函数。

问题是，如果表单中存在验证错误，微调器仍会显示，但不会刷新页面，因为客户端验证会阻止这种情况发生。因此微调器不会消失。

我试过像这样手动隐藏微调器来解决这个问题:

$('form').bind('invalid-form.validate', function () {
    hidespinner();
});

使用这段代码微调器实际上是隐藏的，但它似乎也禁用了客户端验证!即使出现错误，也不会显示任何验证消息并刷新页面。

是否有更好的方法来仅在表单实际提交到服务器时显示微调器，或者在客户端验证停止发布表单时隐藏微调器？

Answer 1

您可以使用 .valid() 方法测试表单是否有效

$('form').submit(function () {
    if($(this).valid()) {
        showSpinner();
    }
});