Calling blockUI and unblockUI in combination with jQuery validator plugin

Question

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.

My code looks like 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();
});

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.

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).

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();
    });
});

I put together a page to quickly demonstrate a working form with validate, blockui, and dynamic rules. http://zaplabs.com/sandbox/jquery/validateblockui/