结合使用jQuery验证程序插件来调用blockUI和unblockUI [英] Calling blockUI and unblockUI in combination with jQuery validator plugin

问题描述

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

I have a very complex form with the validation working correctly. However, since it can take awhile for the validation to complete, I'd like to use blockUI to be called when I click the form's submit button to prevent confusion and double-submissions. I can't quite figure out how to do this.

我的代码如下:

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

然后根据表单中的选择，使用几个按钮(使用单击功能)调用验证，通常会禁用某些规则:

and I'm calling the validation with several buttons (using their click function) depending on selections in the form, often disabling some of the rules:

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

我不知道blockui和unblockui调用的去向，以便当用户单击按钮时，在验证开始之前，blockui会发挥作用，如果验证发现问题，则会调用unblockui并启用再次填写表格.

What I can't figure out is where the blockui and unblockui calls would go so that when the user clicks the button, before validation starts, blockui does its magic, and if the validation finds a problem, unblockui is called and enables the form again.

我对Jquery还是很陌生，我找不到能够成功实现的任何示例.我会很感激任何人可以提供的任何帮助(如果以前已经解决过，请原谅).

I'm pretty new to Jquery and I can't find any examples that I've been able to implement successfully. I would appreciate any help anyone could give (please excuse if this has been covered before).

推荐答案

$(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和动态规则.

I put together a page to demonstrate a working form with validate, blockui, and dynamic rules.

这篇关于结合使用jQuery验证程序插件来调用blockUI和unblockUI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！