Bloquear div mientras se recibe información.

[neodani]

Buenas,

Al final encontré el jquery blockUI que bloquea la pantalla o incluso un div concreto. En mi caso quiero bloquear el div que contiene el formulario mientras se procesa la petición. Esto lo consigo de la siguiente manera.

Código Javascript:

$(document).ready(function() {
        $('#contactar').submit( function(){ 
             $('div#form_contactar').block({ 
                message: $('#msgEspera'),
               css: {   border: '0px',
                        backgroundColor:'transparent'
                    },
                overlayCSS:  { 
                                backgroundColor: '#D5D3D6', 
                                opacity:         0.6 
                            }
            }); 
        }); 
    });
 

El problema que tengo es que mi formulario tiene validaciones JS con jquery.validate

Código Javascript:

$("#contactar").validate({
        rules:{
            nombre:{required:true,minlength: 3},
            email:{
                email:true,
                required:true,
            },
            departamento:{required:true},
            asunto:{required:true,minlength: 5},
            mensaje:{required:true,minlength: 10},
 
            captcha:{required:true,minlength: 6},
        },
        messages:{
            nombre:{
                required:"Campo obligatorio",
                minlength: jQuery.format("Demasiado corto {0} caracteres mínimo")
            },
            email:{
                email:"El correo no es válido",
                required:"Campo obligatorio"
            },
            departamento:{
                required:"Campo obligatorio"
            },
            asunto:{
                required:"Campo obligatorio",
                minlength: jQuery.format("Demasiado corto {0} caracteres mínimo")
            },
            mensaje:{
                required:"Campo obligatorio",
                minlength: jQuery.format("Demasiado corto {0} caracteres mínimo")
            },
            captcha:{
                required:"Campo obligatorio",
                minlength: jQuery.format("Mínimo {0} caracteres")
            },
        }
    });
 

Al tener estas validaciones y al estar declarado que cuando se hace el submit bloqueé el div, me está bloqueando aunque no hayan pasado satisfactoriamente las validaciones, es decir, estando vacio el formulario si pulso enviar, me saltan las validaciones bien pero me bloquea el formulario.

Lo ideal sería que no bloquease el formulario hasta que las validaciones esten correctas y validadas, solo entonces que permita enviar el formulario y se bloquee el div.

¿Sabéis cómo debo hacerlo?

Muchas gracias de antemano!