Question

当表单在fancybox容器中时，fancybox和jquery验证插件有问题。

对于考试（内联）： HTML：

<script>
$(document).ready(function(){  $.fancybox('
<form class="myform">
<input type="text" name="email" class="email" />

<input type="submit" value="submit" name="submit" />
</form>
');
})
</script>

js file：

$(".myform").validate(
          {
          rules: {
            email: "required",
            email: "email"
                 }
           }
        );

如何让jquery验证在fancybox中运行？

Answer 1

做两件事......

使用afterLoad FancyBox回调函数在加载表单后立即初始化.validate()。
将FancyBox的内容放在隐藏的div中，而不是放在jQuery中。它更干净。

注意：您可能需要使用email重新考虑name属性。它有可能引起很大的混淆，因为规则也被称为email。

<强> HTML ：

<a id="test" href="#inline">Test</a>

<div style="display:none" id="inline">
    <form class="myform">
        <input type="text" name="email" class="email" />
        <input type="submit" value="submit" name="submit" />
    </form>
</div>

<强>的jQuery ：

$(document).ready(function () {

    $('#test').fancybox({
        afterLoad: function() {
            $('.myform').validate({
                // rules and options for validate plugin,
                rules: {
                    email: {  // "email" is name of the field
                        required: true,
                        email: true // "email" is name of the rule
                    }
                }
            });
        }
    });

});

工作演示：http://jsfiddle.net/ZMEEW/

fancybox和jquery表单验证

1 个答案: