javascript – Jquery验证多个选项卡,一次验证一个？

我是jQuery的新手,我试图使用它和验证插件(http://docs. jquery.com/Plugins/Validation)创建一个多部分表单,其中包含多个不同部分的选项卡.现在我拥有多个选项卡,“下一步”按钮切换到下一个选项卡.

我遇到的问题是当我终于在最后一页提交时,该表单正确地验证,但是如果另一个页面上有错误,则用户不被通知,并且验证只有在点击“提交”后才会发生.

当我单击“下一步”时,如何单独验证？我真的不想创建多个表单或跟踪隐藏的字段：S任何建议？

谢谢！

<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>

编辑：

@安德鲁：

我做了你的第二个例子和禁用选项卡的组合.似乎工作,除了页面刷新重新禁用选项卡.

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

});

结合：

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

$(".nexttab").click(function() {
    var valid = true;
    var i = 0;
    var $inputs = $(this).closest("div").find("input");

    $inputs.each(function() {
        if (!validator.element(this) && valid) {
            valid = false;
        }
    });

    if (valid) {
        $("#tabs").tabs("SELEct",this.hash);
    }
});

var validator = $("#myForm").validate();
var tabs = $("#tabs").tabs({
    SELEct: function(event,"SELEcted");
        var panelId = $("#tabs ul a").eq(current).attr("href");

        $(panelId).find("input").each(function() {
            console.log(valid);
            if (!validator.element(this) && valid) {
                valid = false;
            }
        });

        return valid;
    }
});

var tabs = $("#tabs").tabs({
    SELEct: function(event,"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;
    }
});