Jquery validation de plusieurs onglets, valider qu'un seul à la fois?

Je suis nouveau sur jQuery et je suis en train de l'utiliser et de la validation du plugin (http://docs.jquery.com/Plugins/Validation) pour créer une partie multi-forme avec plusieurs onglets pour les différentes sections. Maintenant, je l'ai, là où il y a plusieurs onglets et le bouton "Suivant" pour passer à la prochaine onglet.

Le problème, je vais avoir, c'est que lorsque j'ai enfin soumettre à la dernière page, le formulaire valide correctement, mais si il y a des erreurs sur l'autre page de l'utilisateur n'est pas informé, et la validation vraiment n'arrive qu'une fois "soumettre" est cliqué.

Comment puis-je valider chacun individuellement lorsque je clique sur "Suivant"? Je n'ai pas vraiment envie de créer des formes multiples ou garder une trace de champs cachés :S Toutes les suggestions?

Merci!

<script type="text/javascript">
$(document).ready(function() {
    //....stuff
    //tabs
    var tabs = $("#tabs").tabs();
    $(".nexttab").click(function() {
        //var selected = $("#tabs").tabs("option", "selected");
        //$("#tabs").tabs("option", "selected", selected + 1);
        $("#tabs").tabs("select", this.hash);
    });

    //use link to submit form instead of button
    $("a[id=submit]").click( function(){
        $(this).parents("form").submit();
    });

    //form validation
    var validator = $("#myForm").validate();    
});
</script>

<form class="cmxform" id="myForm" method="post" action="">
    <div id="tabs">
        <ul>
            <li><a href="#general">General</a></li>
            <li><a href="#tab2"></a></li>
        </ul>

        <div id="general">
             ....stuff...
            <p>
                <a class="nexttab navbutton" href="#tab2"><span>Next</span></a>  
            </p>
        </div>
        <div id="tab2">
            <h2>Tab2</h2>
            <p>
                <a class="nexttab navbutton" href="#general"><span>Prev</span></a>
                <a class="submit navbutton" id="submit" href="#"><span>Submit</span></a>
            </p>
        </div>
    </div>
</form>

Edit:

@André:

J'ai fait de la combinaison de votre 2ème exemple et la désactivation des onglets. Semble fonctionner, à part avoir l'actualisation de la page re-désactiver les onglets.

var tabs = $("#tabs").tabs({

    disabled: [1,2,3,4,5],

    select: function(event, ui) {
        var valid = true;
        var current = $(this).tabs("option", "selected");
        var panelId = $("#tabs ul a").eq(current).attr("href");

        if(ui.index > current)
        {
            $(panelId).find("input").each(function() {
                //console.log(valid);

                if (!validator.element(this) && valid) {
                    valid = false;
                }
            });

        }

        return valid;
    }   

});

En combinaison avec:

$(".nexttab").click(function() {
    var selected = $("#tabs").tabs("option", "selected");
    $("#tabs").tabs("enable", selected+1);
    $("#tabs").tabs("option", "selected", selected + 1);
});

OriginalL'auteur Jordan | 2011-04-13