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
        }
    })
});

在激活验证之前，在jQuery手风琴中查找元素

1 个答案: