如果在 ASP.NET MVC 5 应用程序中提交有效表单，则触发模式？答案

【问题标题】：Trigger modal if submitting valid form in ASP.NET MVC 5 application?如果在 ASP.NET MVC 5 应用程序中提交有效表单，则触发模式？
【发布时间】：2018-03-24 17:22:17
【问题描述】：

我正在创建一个 ASP.NET MVC 5 应用程序。在用户单击“提交”按钮和加载下一页之间有很长的等待时间，所以我希望只有在用户提交了有效的文件时才会弹出“请等待”模式形式。

我尝试了以下代码，无论表单是否有效，都会导致模式弹出：

$('form').submit(function () {
    $('#waitingModal').show();
});

我的应用程序使用了创建 MVC 应用程序时附带的 jQuery Validate 插件和不显眼的验证，所以我尝试了以下代码：

$('form').submit(function () {
    if ($(this).valid()) {
      $('#waitingModal').show();
    }
});

但我收到以下错误：

TypeError: $(...).valid 不是函数

NuGet 管理器说我正在使用 jQuery 版本 1.11.1、jQuery Validate 1.11.1 和 jQuery Unobtrusive 3.2.3。

我的代码中是否缺少某些内容？还有其他方法吗？

【问题讨论】：

"validate() needs to be called on the form before checking it using this method"。尝试在您的表单元素上调用.validate()，然后再检查它是否为.valid()。
谢谢亚伦！这不仅是一个问题，而且我还必须重新排列我的脚本标签。现在一切正常。希望我理解脚本标签的原因，但至少 .validate() 有意义！
@AaronEveleth, DO NOT call .validate(); - jquery.validate.unobtrusive.js 插件已经调用了它，它只会导致其他问题（这个问题是脚本）
@StephenMuecke 我只是引用了我链接的文档。如果你说的是真的，那么它应该在文档中更新。我没有办法知道这一点，我不使用这个插件。如果不更新，将来可能会导致更多混乱。
@AaronEveleth，您对jquery.validate 文档的引用（如果这就是 OP 的全部内容，那就太好了）。 jquery.validate.unobtrusive.js 插件已经调用了该方法并配置了jquery.validate（根据视图中生成的data-val-* 属性添加规则等）

标签： jquery asp.net-mvc asp.net-mvc-5 jquery-validate unobtrusive-validation

【解决方案1】：

感谢您的 cmets 和 this post，我能够解决我的问题。在这里为遇到此问题的其他人发布解决方案...

我将 .validate() 添加到我的代码中，如下所示：

$('form').submit(function () {
  $(this).validate();
  if ($(this).valid()) {
     $('#waitingModal').show();
  }
});

但遇到了同样的错误：

TypeError: $(...).validate 不是函数

在谷歌搜索并找到this post 之后，我想我会尝试重新排列我的脚本标签。即使我的 jQuery 脚本标签位于我的 Layout.cshtml 中，我也需要将我的脚本标签移动到表单视图上的 jQuery Validate 到脚本标签列表的底部。现在，模态正在以我想要的方式弹出。

编辑

根据其他用户的评论，我删除了 .validate();从我的代码。所以我的代码又回到了这个：

$('form').submit(function () {
  if ($(this).valid()) {
     $('#waitingModal').show();
  }
});

正如用户所说，没有 .validate(); 代码运行得非常好。原来我唯一的问题是我的脚本标签的顺序。

【讨论】：

【解决方案2】：

您需要使用JQuery 的Ajax 回调函数。它可能是 Http Post 或 Get Call。对于您的“提交”场景，它应该是一个 POST 调用。

例如：

var element = $('#dialogContent');
element.html('please wait...');
element.dialog("open");

$.ajax(url, {
                data: { "_": $.now() },
                contentType: 'text/html',
                dataType: 'html',
                type: 'POST'
            }).done(function (data) {
                        setTimeout(function () {
                            element.html(data);
                        }, 100);
                        return false;
            }).fail(function (error) {
                     element.html('Show error information here..');
            }
       );

【讨论】：