Bootstrap Form和UITab窗口验证问题

时间:2013-11-24 07:12:45

标签: jquery forms validation twitter-bootstrap

在我的项目中,用户需要提交一个包含四个不同部分的表单。以下是他的表格样本:

Twitter Tab Window

我正在使用jquery validation在客户端进行验证。 提交按钮显示在最后一个选项卡中,但在提交时,仅验证最后一个选项卡值和字段。

如果我使用表单外部的提交按钮,则验证工作正常,表单仅提交打开选项卡的值,并且不验证其他选项卡选项卡。

如何在移动到下一个标签之前验证每个标签并在最后一个标签上提交表单?

或者,如果可能,onclick提交所有标签字段都已经过验证

Last Tab Panel and submit button with validation

<form class="bs-example form-horizontal" id="xxxxx" method="post">
    <div class="bs-example">
        <ul class="nav nav-tabs" style="margin-bottom: 15px;">
            <li class="active"><a href="#Step1" data-toggle="tab">Step 1: Personal Info</a>
            </li>
            <li><a href="#Step2" data-toggle="tab">Step 2: Qualification</a>
            </li>
            <li><a href="#Step3" data-toggle="tab">Step 3: Questionnaire</a>
            </li>
            <li><a href="#Step4" data-toggle="tab">Step 4: Case Study</a>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="Step1">
                <fieldset>
                    <legend>User Info</legend>
                    <div class="form-group">
                        <label for="name" class="col-lg-2 control-label">Full Name</label>
                        <div class="col-lg-10">
                            <input class="form-control" id="name" name="name" placeholder="Write your Name" type="text" value="">
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
        <div>
            <div class="form-group">
                <div class="col-lg-4 col-lg-offset-4">
                    <input type="hidden" class="submit" value="Save" name="cccc">
                    <button type="submit" class="btn btn-primary btn-lg">Submit and Send</button>
                </div>
            </div>
            </form>

0 个答案:

没有答案