Question

我找不到在两个标签上验证两种不同表单的好方法。我希望两者都有效发布数据。我正在使用标签的bootstrap框架和jquery验证。

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

如果您尝试在一个标签页上提交并且另一个标签上没有数据，那么它仍然会说它有效。如果你提交为空，那么转到其他标签提交它然后会说错。我尝试使用忽略：''很多人建议的东西，但我在每个标签上都找不到很多表格的例子。

任何想法都会有所帮助。

Answer 1

您的代码：

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

....

if (form1.valid() ...

引用OP：

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

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

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

$("#form1").valid()

如果你试图做一个阶梯形式，有各种方法。

当我创建多步骤表单时，我为每个部分使用一组唯一的<form>标记。然后我使用.valid()方法测试该部分，然后再移动到下一部分。 （不要忘记首先初始化插件;在DOM准备好的所有表单上调用.validate()。）

然后在最后一节，我在每个表单上使用.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

不同选项卡中两个表单的JQuery验证

1 个答案: