0

I have a form with 2 invisible DIV which got visible once a button is clicked, poping-up fancybox window. I have the jQuery validatorengine plugin, which does all the validation stuff. The problem is that the validation engine works fine for normal fields but not for the hidden fields which are inside the fancybox window, once they are visible. I suspect this is because fancybox at runtime puts them outside the scop of <form/> which is causing the validation engine to fail, because it can not work on elements outside a form tag.

$(document).ready(function() {  
  $("#category").validationEngine('validate');
  $('#wrapper #addCat').live('click', function() {
  $('<a href="#addCategoryDiv"/>').fancybox({
    'autoDimensions' : false,
    'hideOnContentClick' : false,
    'height' : 450,
    'width' : 500,
    'scrolling' : 'no'
    }).click();
  });
  $('#wrapper #editCat').live('click', function() {
    $('<a href="#editCategory"/>').fancybox({
      'autoDimensions' : false,
      'hideOnContentClick' : false,
      'height' : 450,
      'width' : 500,
      'scrolling' : 'no'
      }).click();
  });
});

Can someone please help me how to fix this? I can see in Firebug that fancybox has made <div style="display:none"> part of code outside the <form></form> tag.

j0k
  • 22,600
  • 28
  • 79
  • 90
Sachin
  • 119
  • 2
  • 19
  • or may be i ask REALLY tough questions, please go through it and try to answer some of them rather than editing english text, sorry but it doesn't help. – Sachin Oct 18 '12 at 04:19

1 Answers1

0

You need to put your validationengine initialization code in the fancybox onComplete method:

$('<a href="#editCategory"/>').fancybox({
                'autoDimensions'        : false,    
                'hideOnContentClick'    : false,
                'height'                : 450,
                'width'                 : 500,
                'scrolling'             : 'no'
                'onComplete'            : function(){
                                              $("#category").validationEngine('validate');   
                                          }
            }).click();
Hailwood
  • 89,623
  • 107
  • 270
  • 423
  • and the reason is because fancybox code went out of the scop of the
    tag at runtime, and jquery validationengine plugin can only be applied on the code within the
    tags
     – Sachin Oct 18 '12 at 04:18
  • OK ill edit the answer soon, but what about manually calling the validation on the inputs manually? – Hailwood Oct 18 '12 at 05:27
  • did you get a chance to look at it? i tried http://stackoverflow.com/questions/2686362/fancybox-asp-net-button-not-working, but nothing seems to be working :( – Sachin Oct 18 '12 at 22:16