结合 jQuery 验证器插件调用 blockUI 和 unblockUI

Question

我有一个非常复杂的表单，验证工作正常。但是，由于验证可能需要一段时间才能完成，因此我想在单击表单的提交按钮时调用 blockUI，以防止混淆和重复提交。我不太清楚该怎么做。

我的代码如下所示：

$("#credential").validate({
     rules: {
              EngId: {
                 required: true
                 }
             ClientAccount: {
                 required: true
                 }
              ...
        }

我根据表单中的选择使用多个按钮（使用它们的单击功能）调用验证，通常会禁用某些规则：

$("#buttonname").click(function() {
   $("#fieldname").rules("remove");
   ...
   $("#credential").submit();
});

我不明白的是 blockui 和 unblockui 调用的位置这样，当用户单击按钮时，在验证开始之前，blockui 会发挥其魔力，如果验证发现问题，则会调用 unblockui 并再次启用表单。

我对 Jquery 还很陌生，我找不到任何我能够成功实现的示例。我将不胜感激任何人可以提供的帮助（如果之前已经介绍过，请原谅）。

Answer 1

$(document).ready(function() {
    $('#form1').validate({
        rules: {
            fieldone: { required: true },
            fieldtwo: { required: true }
        },
        submitHandler: function(form) {
            $(form).block();
            form.submit();
        }
    });

    $('input:checkbox[name=toggleone]').click(function() {
        if ($(this).is(':checked')) {
            $('input[name=fieldone]').rules('add', { required: true });
        } else {
            $('input[name=fieldone]').rules('remove');
        }
    });

    $('#altsubmit').click(function() {
        $('input[name=fieldtwo]').rules('remove');
        $('#form1').submit();
    });
});

我整理了一个页面来演示带有验证的工作表单， blockui 和动态规则。