Jquery验证多个选项卡，一次验证一个

Question

我是新的jQuery和我试图使用它和验证插件(http://docs.jquery.com/Plugins/Validation)来创建一个多部分的表单与多个选项卡的不同部分。现在我有它的地方有多个标签和"下一步"按钮切换到下一个标签。

我遇到的问题是，当我最终提交在最后一页，表单验证正确，但如果有错误在其他页面上的用户没有通知，验证真的只发生在"提交"被点击。

当我点击"下一步"时，我将如何验证每个单独?我真的不想创建多个表单或跟踪隐藏字段:有什么建议吗?

谢谢!

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

编辑:

@Andrew:

我做了你的第二个例子和禁用标签的一些组合。似乎工作，除了让页面刷新重新禁用选项卡。

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", selected + 1);
});

Answer 1

这可以使用validator的.element(selector)函数。你要做的是遍历活动选项卡上的每个元素，然后在输入上调用那个函数。这将依次触发对每个元素的验证，并显示验证消息。

$(".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);
    }
});

此外，当用户单击选项卡转到一组新的输入时，您可能希望运行类似的代码，而不是单击"下一步"。

下面是一个工作示例:http://jsfiddle.net/c2y6r/

更新:这里有另一种方法，你可以做到这一点，取消select事件无效的表单元素:

var validator = $("#myForm").validate();
var tabs = $("#tabs").tabs({
    select: function(event, ui) {
        var valid = true;
        var current = $(this).tabs("option", "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;
    }
});

但是，现在您必须考虑允许用户在向当前页面输入无效数据时返回。另一方面，您可以将所有验证代码保存在一个函数中，如果用户单击选项卡或您的下一个链接，该函数将被触发。

示例:http://jsfiddle.net/c2y6r/1/

更新2，如果你想让人们通过选项卡界面向后导航:

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

Answer 2

现有的代码不适合我(也许它的日期)，所以我想出了以下。本例假设使用jquery选项卡和jquery验证器。

$('#tabs').tabs(
{
    beforeActivate: function( event, ui )
    {   
        var valid = $("#myForm").valid();
        if (!valid) {
            validator.focusInvalid();
            return false;
        }
        else
            return true;
    }
});