0

我正在构建一个页面，您可以在其中单击图像以调出内联 Fancybox 模态，它会为您提供有关图像的一些信息。在该模式中，如果您单击“下载”，则内联内容会淡出，而内联表单会淡入。

我遇到的问题是该表单未使用此处的验证插件进行验证：bassistance.de/jquery-plugins/jquery-plugin-validation/

如果我立即加载内联表单而不是信息内容，它确实有效，所以我认为问题出在淡入/淡出。

有人遇到过这个问题或有什么建议吗？

更新：

这是一些示例代码：

在标题中：

<style>
    #info, #form{display:none;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
<script src="validate.js">
<script>
    $(document).ready(function(){
        $(".image").fancybox({
            maxWidth    : 800,
            maxHeight   : 600,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'fade',
            closeEffect : 'fade'
         });

        button = $('.button');
        info = $('#info');
        form = $('#form');

        button.on('click', function(){
            info.fadeOut();
            form.fadeIn();
        });

        form.validate();
    });

在身体里：

<a href="#info" class="image"><img src="image.png" /></a>

<div id="info">
    Here is some info on this thing!
    <a href="#" class="button">Click here to download this thing!</a>
</div>

<div id="form">
    <form id="downloadform" action="#" method="post">
        <input type="text" class="required" name="" id="" value="" />
        <input type="text" class="required" name="" id="" value="" />
        <input type="text" class="required" name="" id="" value="" />
        <input type="submit" value="Submit" />
    </form>
</div>
4

1 回答 1

0

尝试在表单淡入后初始化验证插件。您可以在.fadeIn()方法中使用回调函数，以便可以在淡入动画完成后设置验证，如下所示：

button.on('click', function () {
    info.fadeOut();
    form.fadeIn(400, function () {
        form.validate();
    });
});
于 2013-05-02T17:38:21.543 回答