Поиск элементов в аккордеоне 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
        }
    })
});