fancybox和jquery表单验证

Question

fancybox和jquery验证插件时，表单处于fancybox容器时出现问题。

对于examle（在线）： 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验证pluging中的fancybox工作？

Answer 1

做两件事情......

1. 使用afterLoad的fancybox回调函数初始化.validate()形式加载之后。

2. 将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/