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

JQuery Colorbox与JQuery验证无法正常工作

2 个答案: