jQuery validate problem

Question

Hi there. 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.

However, it takes 2 clicks of 'ok' to achieve this. Here is the offending jquery:

if(errors){
  // display the tab with the error            
  jQuery('#recording_tabs > 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
      }
  });
}

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.

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

jQuery('#recording_tabs > div').each( function(i){} );

But I got the same result.

Can anyone spot anything I am missing?

Answer 1

This will work if you use the invalidHandler function available on the validate plugin, like this:

jQuery("#myForm").validate({
    invalidHandler: function(form, validator) {
      jQuery('#recording_tabs > div').each( function(i){
        if(jQuery('.invalid:not(label)', this).length){
            jQuery('#recording_tabs').tabs('option','selected', i);
            return false;
        }
      });
    }
});

The invalidHandler only runs when there are errors and after the classes are applied, so it will correctly go to your tab with a class="invalid" element that's not a label.

Answer 2

Thanks for the reply. It seems that I am already using invalidHandler. Here is the full surrounding code (i didn't write this):

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

And it is called via:

someDialog.dialog({
    //... blah
    buttons: {
        'Cancel' : function(){
            jQuery(this).dialog('close');
            },
        'Ok' : function(){
                var valid = someForm.validate().form();
                if( valid ){
                    jQuery(this).dialog('close');
                    //....
                }
            }
    }
});

I'm getting the same problem.