在bootstrap向导中发布表单

时间:2015-07-08 17:55:33

标签: javascript jquery html asp.net-mvc twitter-bootstrap

我有一个使用bootstrapwizard使用以下代码创建的向导

 $('#applicationWizard').bootstrapWizard({
        'tabClass': 'bwizard-steps',
        onTabShow: function (tab, navigation, index) {
            var $total = navigation.find('li').length;
            var $current = index + 1;
            var $percent = ($current / $total) * 100;
            $('#applicationWizard').find('.bar').css({ width: $percent + '%' });
        }
    });

这是视图

        using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)

            <div class="row">
                <div id="applicationWizard" class="col-md-10 col-md-offset-1">
                    <ul>
                        <li><a href="#tab1" data-toggle="tab">Section I</a></li>
                        <li><a href="#tab2" data-toggle="tab">Section II</a></li>
                        <li><a href="#tab3" data-toggle="tab">Section III</a></li>
                        <li><a href="#tab4" data-toggle="tab">Section IV</a></li>
                        <li><a href="#tab5" data-toggle="tab">Section V</a></li>
                    </ul>
                    <br />
                    <hr />
                    <div class="tab-content">                               
                        <div class="tab-pane" id="tab1">
                            <h3>Section I: General Information</h3>
                            <hr />
                            @Html.Partial("_General", Model)
                        </div>
                        <div class="tab-pane" id="tab2">
                            <h3>Section II: Aff Information</h3>
                            <hr />
                            @Html.Partial("_AffInformation", Model)
                        </div>
                        <div class="tab-pane" id="tab3">
                            <h3>Section III: Origination Information</h3>
                            <hr />
                            @Html.Partial("_Origination", Model)
                        </div>
                        <div class="tab-pane" id="tab4">
                            <h3>Section IV: Lending Information</h3>
                            <hr />
                            @Html.Partial("_LendingInformation", Model)
                        </div>
                        <div class="tab-pane" id="tab5">
                            <h3>Section V: Control</h3>
                            <hr />
                            @Html.Partial("_Control", Model)
                        </div>                
                        <hr />
                        <ul class="pager wizard">
                            <li class="previous first" style="display:none;"><a href="#">First</a></li>
                            <li class="previous"><a href="#">Previous</a></li>
                            <li class="next last" style="display:none;"><a href="#">Last</a></li>
                            <li class="next"><a href="#">Next</a></li>
                            <li><input type="submit" name="Save" value="Save" class="cancel" /></li>
                            <li><input type="submit" name="SubmitApplication" value="Submit Application" /></li>
                        </ul>
                    </div>
                </div>

            </div>

            <br />
        }

问题是,单击“提交”时,它只会验证当前选项卡及其中的数据,而不是整个表单。有人可以告诉我如何使它验证整个表单而不是一个选项卡。

由于

0 个答案:

没有答案