jQuery验证在不同的标签两种形式(JQuery Validation on Two Forms

我遇到一些麻烦找上两个标签验证两种不同形式的一个很好的解决方案。我想这两个是有效的发布数据。我使用的标签自举框架，jQuery验证。

这里的例子： http://jsfiddle.net/SLsde/

HTML

<div class="container">
<ul class="nav nav-pills" id="tabs">
    <li class="active"><a href="#tab1" data-toggle="pill">Tab 1</a></li>
    <li><a href="#tab2" data-toggle="pill">Tab 2</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <form class="form" id="form1">
            <div class="form-group">
                <label>Input 1</label>
                <input id="input1" name="input1" type="text" class="form-control" />
            </div>

            <input id="Submit1" type="submit" class="btn btn-primary" value="Submit" />
        </form>
    </div>

    <div class="tab-pane" id="tab2">
        <form class="form" id="form2">
            <div class="form-group">
                <label>Input 2</label>
                <input id="input2" name="input2" type="text" class="form-control" />
            </div>

            <input id="Submit2" type="submit" class="btn btn-primary" value="Submit" />
        </form>
    </div>
</div>
</div>

var form1 = $("#form1").validate({
    ignore: '',
    rules: {
        "input1": "required"
    }
});

var form2 = $("#form2").validate({
    ignore: '',
    rules: {
        "input2": "required"
    }
});

$("#form1").submit(function (e) {
    e.preventDefault();

    if (form1.valid() && form2.valid()) {
        alert("Post Data");
    } else {
        alert("Not Valid");
    }
});

$("#form2").submit(function (e) {
    e.preventDefault();

    if (form1.valid() && form2.valid()) {
        alert("Post Data");
    } else {
        alert("Not Valid");
    }
});

如果你试图提交一个标签，并与其他没有数据，它会仍然说这是有效的。如果你用它提交空然后去其他选项卡，然后提交它会说假的。我尝试使用忽视：“”的事情，很多建议，但我无法找到每个选项卡上的表单的例子很多。

任何想法将是有益的。

您的代码：

var form1 = $("#form1").validate({  ...  });

....

if (form1.valid() ...

报价OP：

“提交一个标签，并与其他没有数据，它会仍然认为它是有效的”

这里的问题是，你要附加.valid()到form1变量，它代表了.validate()对象。

按文档，附加.valid()到所选择的form这样的 ...

$("#form1").valid()

如果你正在试图做的台阶形式，有各种方法。

当我创建多步骤的形式，我使用一组唯一的<form>对于每个部分标签。然后，我使用.valid()方法移动到下一个前测试部分。 （不要忘了先初始化插件;调用.validate()在所有形式的DOM准备好了。）

然后在最后一节，我用.serialize()每份表格上，并将它们连接成提交数据的查询字符串。

事情是这样的......

$(document).ready(function() {

    $('#form1').validate({ // initialize form 1
        // rules
    });

    $('#gotoStep2').on('click', function() { // go to step 2
        if ($('#form1').valid()) {
            // code to reveal step 2 and hide step 1
        }
    });

    $('#form2').validate({ // initialize form 2
        // rules
    });

    $('#gotoStep3').on('click', function() { // go to step 3
        if ($('#form2').valid()) {
            // code to reveal step 3 and hide step 2
        }
    });

    $('#form3').validate({ initialize form 3
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           // ajax submit
           return false;
        }
    });

    // there is no third click handler since the plugin takes care of this 
    // with the built-in submitHandler callback function on the last form.

});

重要的是要记住，我的click上面的处理程序没有使用type="submit"按钮。这些都是常规按钮，无论是外面的form标记或type="button" 。

只有最后一个窗体上的按钮是一个普通type="submit"按钮。那是因为我利用这个插件的内置submitHandler只有最后形式的回调函数。

“概念证明” DEMO： http://jsfiddle.net/N9UpD/

另请参阅参考：

https://stackoverflow.com/a/17975061/594235