validation jQuery avec boîte de dialogue

Question

J'ai une boîte de dialogue qui apparaît jquery et prend les données utilisateur via un formulaire. Une fois l'utilisateur fini, il clique sur le bouton 'ok'. Cette boîte de dialogue a quelques onglets « » de sorte que lorsque « ok » est cliqué, nous voulons valider toutes les données fournies dans chaque onglet. Si quelque chose n'est pas valide, nous amenons l'utilisateur à cet onglet et lui disons ce qui ne va pas.

Cependant, il faut 2 clics de « ok » pour y parvenir. Voici le jquery incriminé:

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

Alors ce qui se passe dans le code ci-dessus est que lorsque l'on clique « ok », nous obtenons un « nous sommes ici » alerte pour chaque div (onglet), puis rien ne se passe. En cliquant à nouveau sur 'ok', l'alerte 'nous sommes ici' s'affiche jusqu'à ce que nous passions à l'onglet avec les erreurs.

Alors, évidemment, la première fois autour de l'intérieur si la déclaration est fausse pour chaque onglet qui signifie probablement jQuery n'a pas enregistré les classes « invalides » dans le temps. J'ai donc essayé une déclaration vide each() juste avant le principal dans l'espoir qu'il fixerait le problème

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

Mais je suis arrivé le même résultat.

Puis quoi que ce soit au comptant de quelqu'un que je suis absent?

---

Merci pour la réponse. Il semble que j'utilise déjà invalidHandler. Voici le code complet environnant (je n'ai pas écrit cela):

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

Et il est appelé via:

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

Je reçois le même problème.

Answer 1

Cela fonctionnera si vous utilisez le invalidHandler function available sur le plug-in validate, comme ceci:

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

Le invalidHandler ne fonctionne que quand il y a des erreurs et après les classes sont appliquées, il sera correctement aller à votre onglet avec un élément class="invalid" qui n'est pas une étiquette.