jQuery show/hide form + Fancybox 2 = not working

I'm building a page where you click on an image to bring up an inline Fancybox modal which gives you some info on the image. In that modal, if you click Download, the inline content fades out and an inline form fades in.

Problem I'm having is that form is not validating using the validation plugin here : bassistance.de/jquery-plugins/jquery-plugin-validation/

It does work if I load the inline form right away, instead of the info content so I figure it's the fadeIn/fadeOut that's the issue somehow.

Anyone come across this issue or have any suggestions?

UPDATE:

Here's some example code:

In the header:

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

In the body:

<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>

Answers


Try initializing the validation plugin after the form has been faded in. You can use a callback function within the .fadeIn() method so the validation can be set after the fade in animation has been completed like :

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

Need Your Help

Show the parent ViewController of a tabbar Item from another ViewController

ios objective-c uitabbarcontroller

I have a TabBarController which include 3 tabBar Items. In each TabBar Items include Navigation Controller.

Auto fill field in WebView using javascript fails

android webview autofill

I am attempting to auto fill a field in a WebView. The page source of the webpage is here: http://pastebin.com/WKbj7XJh