当前位置: 动力学知识库 > 问答 > 编程问答 >

jQuery validation with dialog box

问题描述:

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?


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.

网友答案:

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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: