取消 jquery 按钮。单击 MVC ValidationMessageFor答案

【问题标题】：Cancel jquery button.click on MVC ValidationMessageFor取消 jquery 按钮。单击 MVC ValidationMessageFor
【发布时间】：2016-01-12 16:20:04
【问题描述】：

我有一个 MVC 解决方案，它使用 @Html.ValidationMessageFor 和 $('.btn').click() 函数来显示一个简单的“正在加载...”对话框。如果表单验证失败，我想取消此 click() 函数操作。我查看了 jquery.validation.unobtrusive 库（并将其包含在我的解决方案中），目前正在尝试进行如下检查。

    $('.btn').click(function () {
        if ($(this).validate().valid()) {
            $("#initialWaitTableLoad").fadeIn();
        }
    });

此验证检查不起作用，仍在执行 fadeIn() 方法。如何防止在验证失败时发生此操作？

【问题讨论】：

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

【解决方案1】：

如果您需要在单击按钮时检查表单的有效性，您可以在单击处理程序中使用.valid() 方法并将.valid() 附加到您的form，而不是按钮，就像您所做的那样。

$('.btn').click(function () {
    if ($('#myform').valid()) { // test validity of the form
        $("#initialWaitTableLoad").fadeIn();
    }
});

编辑：

$('#myform') 只是我上面的通用示例。检查 DOM 并使用您希望针对此特定表单的任何 jQuery 选择器。

【讨论】：

FWIW，我还需要将表单名称添加到我的 @Html.BeginForm(..., new { name = "myform" })
@McArthey，或者简单地使用您希望正确定位此表单的任何 jQuery 选择器。

【解决方案2】：

您需要检查表单的有效性，而不是按钮。在您的情况下， $(this) 指的是刚刚单击的按钮。如果可能，编辑您的函数以在表单提交时运行，而不是单击按钮。

$('#myform').submit(function () {
    if ($(this).valid()) {
        $("#initialWaitTableLoad").fadeIn();
    }
});

【讨论】：

您不会想要捕获submit() 事件，因为插件已经自动执行此操作。
谢谢。我的代码中直截了当，但解决问题的所有尝试都让我感到困惑。感谢您的提醒。