Question

我在http://jsfiddle.net/nGnbJ/7/有这个小提琴，其代码如下。我正在使用Bootstrap向导来创建选项卡。我需要的是，当用户从第三个选项卡上的提交按钮提交表单时，它会检查所有选项卡中的所有字段，并突出显示选项卡以及具有验证错误的字段。

“提交”按钮仅验证并突出显示活动选项卡上页面上可见的字段。其他选项卡中的字段根本不会被验证。

这是我原来的问题，我没有得到回复 https://stackoverflow.com/questions/31297685/highlighting-errors-in-bootstrapwizard-sections使用JSFiddle和基本的东西来简化它。

<form class="myData" id="myData1" method="post">
<div class='span12'>
     <h2>Form Wizard</h2>
</div>
<div class='span12'>
    <div id="rootwizard">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <ul>
                        <li><a href="#tab1" data-toggle="tab">Step 1</a>

                        </li>
                        <li><a href="#tab2" data-toggle="tab">Step 2</a>

                        </li>
                        <li><a href="#tab3" data-toggle="tab">Step 3</a>

                        </li>

                    </ul>
                </div>
            </div>
        </div>

        <div class="tab-content">
            <div class="tab-pane" id="tab1">
      <div class="col-md-8">
        <input name="MemberFullLegalName" class="form-control" id="MemberFullLegalName" type="text" value="" data-val-required="The Full Legal Name field is required." data-val="true">
          </input>
        <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="MemberFullLegalName"></span>
                </div>


            </div>
            <div class="tab-pane" id="tab2">
               <input name="MemberFullLegalName1" class="form-control" id="MemberFullLegalName1" type="text" value="" data-val-required="The Full Legal Name field is required." data-val="true">
          </input>
        <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="MemberFullLegalName1"></span>

            </div>
            <div class="tab-pane" id="tab3">
   <input name="MemberFullLegalName2" class="form-control" id="MemberFullLegalName2" type="text" value="" data-val-required="The Full Legal Name field is required." data-val="true">
          </input>
        <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="MemberFullLegalName2"></span>               
                 <input type="submit" name="SubmitApplication" value="Submit Application" />
            </div>           
            <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>
            </ul>
        </div>
    </div>
</div>
</form>

Answer 1

我的建议是在表单的每个字段上加上“id”。

之后使用Jquery或Javascript检查它们是否为空字段或验证要求。

突出显示表单中的错误

1 个答案: