表单验证时颜色框调整大小（jQuery 验证）

Question

好的，事情是这样的：

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

我在单击事件上调用调整大小方法，它仅在第二次单击时有效。

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

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

Answer 2

我找到了解决方案：

$(".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                    
                    }
                },
                invalidHandler: function(form, validator) {
                    var errors = validator.numberOfInvalids();
                    if (errors) {
                        window.setTimeout('$.colorbox.resize()',10);
                    }
                }
            });         
        }
    });
});