在不同选项卡中对两个表单进行 JQuery 验证

Question

我很难找到一个很好的解决方案来验证两个选项卡上的两个不同表单。我希望两者都可以有效地发布数据。我正在为选项卡和 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>

JS

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

如果您尝试在一个选项卡上提交，而另一个选项卡上没有数据，它仍然会说它是有效的。 如果您提交时为空，则转到其他选项卡提交，然后将显示为 false。我尝试使用许多人建议的 ignore: '' 东西，但我在每个选项卡上都找不到很多表单示例。

任何想法都会有所帮助。

Answer 1

您的代码：

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

....

if (form1.valid() ...

引用 OP：

“在一个标签上提交，而另一个标签上没有数据，它仍然会说它是有效的”

这里的问题是您将.valid() 附加到代表.validate() 对象的form1 变量。

As per docs, attach .valid() to the selected form like this...

$("#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 回调函数。

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

另外，请参阅：

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