在一個jQuery手風琴查找元素之前激活用於驗證

Question

我有一個jQuery手風琴設置如下：

var checkout = $('#bookingaccordion').accordion({ 
    header: 'h3.header', 
    heightStyle: 'content', 
    collapsible: false 

}); 

我希望用戶移動到下一個之前驗證手風琴的每個面板。我有每個表單字段設置與required屬性（HTML5）。使用accordionbeforeactivate事件，我想要循環顯示相應面板中的輸入，並在有必要字段時標記並停止顯示下一個面板。

到目前爲止，我有：

checkout.on('accordionbeforeactivate', function(event, ui) { 
    $(ui.oldPanel).each(function(index,element) { 
     if($(element).prop('required')) { 
      console.log($(this).prop('name')); 
//Validation and if fails, stop next panel 
     } 
    }) 
}); 

但我沒有看到在控制檯東西。我敢肯定我的問題是我如何處理ui，但無法弄清楚。

HTML結構爲：

<div class="accordion ui-accordion ui-widget ui-helper-reset" id="bookingaccordion" role="tablist"> 
    <h3 class="header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all" role="tab" id="ui-accordion-bookingaccordion-header-0" aria-controls="ui-accordion-bookingaccordion-panel-0" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Party Guest &amp; Cost Information</h3> 
    <div class="pane pane1 ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-accordion-bookingaccordion-panel-0" aria-labelledby="ui-accordion-bookingaccordion-header-0" role="tabpanel" aria-hidden="true" style="display: none;"> 
     <fieldset> 
      <div class="form-row form-inline"> 
       <label for="partybags">Party Bags (5 items) @ £<span class="costvalue">5</span> each bag:<br>(plus carriage)</label> 
       <input type="number" name="partybags" id="partybags" min="0" required> 
      </div> 
     </fieldset> 
    </div> 
    <h3 class="header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top" role="tab" id="ui-accordion-bookingaccordion-header-1" aria-controls="ui-accordion-bookingaccordion-panel-1" aria-selected="true" aria-expanded="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>Party Details</h3> 
    <div class="pane pane2 ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="ui-accordion-bookingaccordion-panel-1" aria-labelledby="ui-accordion-bookingaccordion-header-1" role="tabpanel" aria-hidden="false" style="display: block;"> 

     <fieldset> 
      <legend>Party Details</legend> 
      <div class="form-row form-inline"> 
       <label for="agerange">Age Range:</label> 
       <input type="text" name="agerange" id="agerange" required="" placeholder="eg. 6 - 7 year olds " required> 
      </div> 
     </fieldset> 
    </div> 
</div> 

感謝

Answer 1

的一個問題，我可以看到的是，您要循環ui.oldPanel將只包含包裝板基準，而是你要通過遍歷所有的在它的輸入元素，因此

checkout.on('accordionbeforeactivate', function (event, ui) { 
    $(ui.oldPanel).find('input').each(function (index, element) { 
     if ($(element).prop('required')) { 
      console.log($(this).prop('name')); 
      //Validation and if fails, stop next panel 
     } 
    }) 
});