彩盒上表单验证调整（jQuery验证）

Question

好了，所以这里的交易：

我通过AJAX调用彩盒形式，并建立了一个回调来处理其验证，工作正常。唯一的问题是，当我试图在字段无效时（其生成带有错误类的标签）调整框的大小时，只能在第二次尝试时使用。

我在点击事件上调用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(); 
    } 
}); 

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