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

View to Controller in mvc3

asp.net-mvc-3 razor radiobuttonfor

I have a problem on passing values from view to controller

Can't fill Table with items with javafx

table javafx-2 javafx fill fxml

I'm not so good at javafx and also in English^^. I programmed a TableView but I dont know why it doesn't fill the Table with the Items I created. Perheps it fills the Table, but I dont see them. I ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.