jquery-validate - fancybox 和 jquery 表单验证

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 文件：

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

如何使 jquery 验证插件在 fancybox 中工作？

Answer 1

做两件事...

1. 加载表单后立即使用afterLoadFancyBox 回调函数进行初始化.validate()。

2. 将 FancyBox 的内容隐藏div在您的 jQuery 中而不是。它更干净。

注意：您可能需要重新考虑使用emailforname属性。由于该规则也称为 ，因此它有可能引起极大的混乱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/