具有 JQuery 验证的 JQuery Colorbox 不起作用

JQuery Colorbox with JQuery Validation not working

本文关键字：JQuery 不起作用 Colorbox 验证 具有      更新时间：2023-09-26

我在表单上使用 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();
    });
    });

我也尝试了完成事件！

您的代码：

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

试试这个 

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

而不是 

$(document).bind('cbox_complete', function(){
    validateform();
});
相关文章：