validation - jQuery show/hide form + Fancybox 2 = not working -

i'm building page click on image bring inline fancybox modal gives info on image. in modal, if click download, inline content fades out , inline form fades in.

problem i'm having form not validating using validation plugin here : bassistance.de/jquery-plugins/jquery-plugin-validation/

it work if load inline form right away, instead of info content figure it's fadein/fadeout that's issue somehow.

anyone come across issue or have suggestions?

update:

here's example code:

in 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 body:

<a href="#info" class="image"><img src="image.png" /></a>  <div id="info">     here info on thing!     <a href="#" class="button">click here download 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> 

try initializing validation plugin after form has been faded in. can use callback function within .fadein() method validation can set after fade in animation has been completed :

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