title: jQuery validation with dialog box
body: <p>I have a jquery dialog box that pops up and takes user data through a form.  Once the user is finished s/he clicks the 'ok' button.  This dialog box has a few 'tabs' such that when 'ok' is clicked, we want to validate all the data given in each tab.  If anything is invalid, we take the user to that tab and tell them what's wrong.</p>
  
  <p>However, it takes 2 clicks of 'ok' to achieve this.  Here is the offending jquery:</p>
  
  <pre><code>if(errors){
    // display the tab with the error            
    jQuery('#recording_tabs &gt; div').each( function(i){
        alert('we are here');
        if(jQuery(this).find('*').not('label').hasClass('invalid')){
            jQuery('#recording_tabs').tabs('option','selected', i);
            return false;// prevent further processing
        }
    });
  }
  </code></pre>
  
  <p>So what happens in the above code is that when we click 'ok' we get a 'we are here' alert for each div (tab) and then nothing happens.  Clicking 'ok' again gives us the 'we are here' alert up until we are taken to the tab with the errors.</p>
  
  <p>So obviously the first time round the inner if statement is false for each tab which probably means jQuery hasn't registered the 'invalid' classes in time.  So I tried a blank each() statement just before the main one in the hope that it would fix the problem</p>
  
  <pre><code>jQuery('#recording_tabs &gt; div').each( function(i){} );
  </code></pre>
  
  <p>But I got the same result.</p>
  
  <p>Can anyone spot anything I am missing?</p>
  
  <hr>
  
  <p>Thanks for the reply.  It seems that I am already using <code>invalidHandler</code>.  Here is the full surrounding code (i didn't write this):</p>
  
  <pre><code>someForm.validate( {
      errorClass: "invalid",
      invalidHandler : function( e, validator){
          var errors = validator.numberOfInvalids();
          var msg = jQuery( "#message", someForm );
          if(errors){
              // display the tab with the error            
              jQuery('#recording_tabs &gt; div').each( function(i){
                  if(jQuery('.invalid:not(label)', this).length){
                      jQuery('#recording_tabs').tabs('option','selected', i);
                      return false;// prevent further processing
                  }
              });
          }
          else{
              msg.hide();
          }
      },
      rules: { ... //blah }
  });
  </code></pre>
  
  <p>And it is called via:</p>
  
  <pre><code>someDialog.dialog({
      //... blah
      buttons: {
          'Cancel' : function(){
              jQuery(this).dialog('close');
              },
          'Ok' : function(){
                  var valid = someForm.validate().form();
                  if( valid ){
                      jQuery(this).dialog('close');
                      //....
                  }
              }
      }
  });
  </code></pre>
  
  <p>I'm getting the same problem.</p>