1

I'm having some trouble finding a nice solution for validating two different forms on two tabs. I want both to be valid to post data. I'm using the bootstrap framework for the tabs, and jquery validation.

Here's the example: 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");
    }
});

If you try and submit on one tab and with no data on the other it'll still say it's valid. If you submit with it empty then go to other tab to submit it will then say false. I tried using the ignore: '' thing that many suggest, but I couldn't find many examples of a form on each tab.

Any ideas would be helpful.

4

1 回答 1

0

你的代码：

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

....

if (form1.valid() ...

引用操作：

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

这里的问题是您附加.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"按钮。这些是常规按钮，位于标签之外或.formtype="button"

只有最后一个表单上的按钮是常规type="submit"按钮。那是因为我只在最后一个表单上利用了插件的内置submitHandler回调函数。

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

另外，请参阅以供参考：

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

于 2013-09-30T15:57:19.620 回答