Html 5验证和bootstrap手风琴 - 我如何显示有验证问题的窗格？

Question

所以我有这个html表单，每个输入项都有required属性以及oninvalid方法。

使用twitter bootstrap accordion分段分段。例如（客户详细信息，地址详细信息等）

我需要做的是在用户点击提交时向用户显示验证问题的窗格。

我的Html：

  <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
              Customer Details
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse customerdetails in">
          <div class="panel-body ">
            <div class="row">
        <div class="col-xs-9 form-column-left">
            <label>Title</label>
             <input oninvalid="ErrorPane('customerdetails')" type="text" title="" data-original-title="" id="custitle" name="mobilePhoneFree" class="form-control " placeholder="Mr / Mrs" value="" required="">
        </div>
        <div class="col-xs-9 form-column-left">
            <label>Name & Surname</label>
             <input type="text" oninvalid="ErrorPane('customerdetails')" title="" data-original-title="" id="customername" name="customername" class="form-control " placeholder="Name & Surname" value="" required="">
        </div>

        <div class="col-xs-9 form-column-left">
            <label>ID Type</label>
                  <select class="form-control">
      <option value="SAID">South African ID</option>
      <option value="PASSPORT">Passport</option>
    </select>
        </div>
        <div class="col-xs-9 form-column-left">
            <label>ID/Passport Number</label>
             <input type="text" oninvalid="ErrorPane('customerdetails')" title="" data-original-title="" id="idnumber" name="mobilePhoneFree" class="form-control " placeholder="Enter your mobile number" value="" required="">
        </div>
        <div class="col-xs-9 form-column-left">
            <label>Email Address</label>
             <input type="text" oninvalid="ErrorPane('customerdetails')" title="" data-original-title="" id="emailaddress" name="mobilePhoneFree" class="form-control " placeholder="Enter your mobile number" value="" required="">
        </div>
    </div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
              Address Details
            </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse addressdetails ">
          <div class="panel-body ">
            <div class="col-xs-9 form-column-left">
            <label>Address Line 1</label>
             <input oninvalid="ErrorPane('addressdetails')" type="text" title="" data-original-title="" id="address1" name="address1" class="form-control " placeholder="" value="" required="">
            </div>
            <div class="col-xs-9 form-column-left">
            <label>Address Line 2</label>
             <input oninvalid="ErrorPane('addressdetails')" type="text" title="" data-original-title="" id="address2" name="address2" class="form-control " placeholder="" value="" >
            </div>
            <div class="col-xs-9 form-column-left">
            <label>Suburb</label>
             <input oninvalid="ErrorPane('addressdetails')" type="text" title="" data-original-title="" id="suburb" name="suburb" class="form-control " placeholder="" value="" required >
            </div>
            <div class="col-xs-9 form-column-left">
            <label>Postal Code</label>
             <input  oninvalid="ErrorPane('addressdetails')" type="text" title="" data-original-title="" id="postalcode" name="postalcode" class="form-control " placeholder="" value="" required>
            </div>
          </div>
        </div>
      </div>
    </div>

我的JavaScript：

<script>
    function ErrorPane(panename){
        $('div.'+panename).collapse('toggle');
    }
</script>

如果特定字段未验证，则调用函数Errorpane，并传递需要显示的窗格的类名。

该部分用于显示和隐藏其他不起作用的窗格。因此，如果存在错误窗格3，则窗格1和2显示。我只需要一个显示问题的窗格。

任何帮助都将不胜感激。