Colorbox在表单验证时调整大小(jQuery验证)

Question

好的,这就是交易:

我通过AJAX调用Colorbox中的表单,并设置了一个回调来处理它的验证,这很好.唯一的问题是,当我尝试在字段无效时调整框大小(生成带有一类错误的标签)时,仅适用于第二次尝试.

我在click事件上调用resize方法,它只在第二次单击时起作用.

我怀疑这是因为它试图在生成标签之前调整大小......我不知道如何规避这个问题.任何帮助,将不胜感激.

$(".colorbox").click(function(e) {
    e.preventDefault();

    var el = $(this),
        sdHref = (el.attr("data-sd-href") ? el.attr("data-sd-href") : el.attr("href")),
        sdTitle = (el.attr("data-sd-title") ? el.attr("data-sd-title") : el.attr("title")),
        sdIframe = (el.attr("data-sd-iframe") ? true : false),
        sdWidth = (el.attr("data-sd-width") ? el.attr("data-sd-width") : false),
        sdHeight = (el.attr("data-sd-height") ? el.attr("data-sd-height") : false);

    $.colorbox({
        href: sdHref,
        title: sdTitle,
        iframe: sdIframe,
        width: sdWidth,
        height: sdHeight,
        scrolling: false,
        onComplete: function() { // I validate the form once the content is loaded
            $("form").validate({
                rules: {
                    phone: {
                        minlength: 10,
                        maxlength:10,
                        digits: true                    
                    }
                }
            });         
        }
    });
});

$('body').click(function(event) { // Even bubbling works on clicking the button, but only on the second try...
   if ($(event.target).is('button[type=submit]')) {
     $.colorbox.resize();
   }
});

Answer 1

我的解决方案

 $('#form_nuevo_almacen').validate({           
    rules: {
        nombre: {
            required: true,
        },
        clave: {
            required: true,
        }

    },
    messages: {
        nombre: {
            required: "Almacen requerido",
        },
        clave:{
            required:'Clave requerida',
        }
    },
     showErrors: function(errorMap, errorList) {
        this.defaultShowErrors();
        $.colorbox.resize();
    },
    submitHandler: function(form){
        form.submit();
        $.colorbox.close();
    }
});