javascript - 带有 JQuery 验证的 JQuery Colorbox 不起作用

Question

我在表单上使用 JQuery 验证，效果很好，但是当我将表单放入“colorbox”时，验证不再起作用！

$(document).ready(function(){

    function validateform(){
        $("#edit_contact_form").validate({
            rules : {
                "phone" : {
                    required : true,
                    number : true,
                    minlength : 7
                }
            },
            submitHandler : function(form) {
                alert("form submitted");
                return false;
            }
        });
    }

    $.colorbox({html:$("#edit_contact_div").html()});

    $(document).bind('cbox_complete', function(){
        validateform();
    });

    });

我也尝试过 onComplete 事件！

Answer 1

你的代码：

function validateform(){
    $("#edit_contact_form").validate({ ... });
}

$(document).bind('cbox_complete', function(){
    validateform();
});

该.validate()方法只是插件的初始化方法，不是测试表单的方法。此外，.validate()应该只为此初始化调用一次，并且始终忽略任何后续调用。因此，通过将其放置在另一个函数或事件处理程序中来多次调用它通常非常有问题或完全损坏。

在表单的 HTML 构建后立即调用.validate()，通常在 DOM 就绪时调用。

该插件还将自动忽略隐藏字段。由于您的表单的 HTML 似乎hidden直到需要它，设置ignore选项以禁用此行为。

$(document).ready(function(){

    $("#edit_contact_form").validate({
        ignore: [], // allow validation of hidden fields
        // your rules, options, and callbacks
    });

    $.colorbox({html:$("#edit_contact_div").html()});

});

Answer 2

尝试这个

$("body").on('click','cbox_complete', function(){
    validateform();
});

代替

$(document).bind('cbox_complete', function(){
    validateform();
});