Javascript 突出显示表单中的错误

Javascript 突出显示表单中的错误,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我有一把小提琴,上面有下面的代码。我正在使用引导向导创建选项卡。我需要的是,当用户从第三个选项卡上的submit按钮提交表单时,它会检查所有选项卡中的所有字段,并高亮显示这些选项卡以及存在验证错误的字段 “提交”按钮仅验证并突出显示活动选项卡上页面上可见的字段。“其他”选项卡中的字段根本不进行验证 这是我的原版,我没有得到回复 所以用JSFIDLE和基本的东西来简化它 <form class="myData" id="myData1" method="post"> <div c

我有一把小提琴,上面有下面的代码。我正在使用引导向导创建选项卡。我需要的是,当用户从第三个选项卡上的submit按钮提交表单时,它会检查所有选项卡中的所有字段,并高亮显示这些选项卡以及存在验证错误的字段

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

这是我的原版,我没有得到回复 所以用JSFIDLE和基本的东西来简化它

<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>

表单向导

我的建议是在表单中的每个字段上都有“id”


然后用Jquery或Javascript检查它们是空字段还是您的验证要求。

Fiddle链接对我不起作用