多步结帐页面上的WooCommerce字段验证

Question

我遇到了这个问题，需要您的帮助来解决。我使用MultiStep Checkout表单，除字段验证外，其他一切似乎都很好。我有3个步骤

结算>付款>订单确认

问题是，当在“计费”步骤中将必填字段留空时，Woocommerce允许我转到“付款”步骤，并显示错误消息未填写必填字段。我希望在“结算”步骤中执行该检查。我检查了form-checkout.php，发现导航是由此JS进行的：

<?php if ($thegem_checkout_type == 'multi-step'): ?>
<script>
(function($) {
    function active_checkout_tab($tab, isinit) {
        if ($tab.length == 0 || ($tab.hasClass('active') && !isinit)) {
            return false;
        }

        $tab.parent().find('.checkout-step').removeClass('active before-active');
        $tab.addClass('active');
        $tab.prev('.checkout-step').addClass('before-active');
        var tab_id = $tab.data('tab-id');
        $('.checkout-contents').removeClass('active');
        $('.checkout-contents[data-tab-content-id="' + tab_id + '"]').addClass('active');
        window.location.hash = '#' + tab_id;
    }

    var m = window.location.hash.match(/#checkout\-(.+)/);
    if (m && $('.checkout-steps .checkout-step[data-tab-id="checkout-' + m[1] + '"]').length == 1) {
        active_checkout_tab($('.checkout-steps .checkout-step[data-tab-id="checkout-' + m[1] + '"]'), true);
    } else {
        active_checkout_tab($('.checkout-steps .checkout-step:first'), true);
    }

    $('.checkout-steps .checkout-step').not('.disabled').click(function() {
        active_checkout_tab($(this), false);
    });
})(jQuery);
</script>

这是php代码：

<?php if ($thegem_checkout_type == 'multi-step'): ?>
<div class="checkout-steps <?php if(is_user_logged_in()): ?>user-logged<?php endif; ?> clearfix">
    <?php if(is_user_logged_in() || 'no' === get_option( 'woocommerce_enable_checkout_login_reminder' )): ?>
        <div class="checkout-step active" data-tab-id="checkout-billing"><?php esc_html_e('1. Facturation','thegem'); ?></div>
        <div class="checkout-step" data-tab-id="checkout-payment"><?php esc_html_e('2. Paiement','thegem'); ?></div>
        <div class="checkout-step disabled" data-tab-id="checkout-confirmation"><?php esc_html_e('3. Confirmation','thegem'); ?></div>
    <?php else: ?>
        <div class="checkout-step active" data-tab-id="checkout-signin"><?php esc_html_e('1. Se connecter','thegem'); ?></div>
        <div class="checkout-step" data-tab-id="checkout-billing"><?php esc_html_e('2. Facturation','thegem'); ?></div>
        <div class="checkout-step" data-tab-id="checkout-payment"><?php esc_html_e('3. Paiement','thegem'); ?></div>
        <div class="checkout-step disabled" data-tab-id="checkout-confirmation"><?php esc_html_e('4. Confirmation','thegem'); ?></div>
    <?php endif; ?>
</div>

所以我的问题是如何在第一步而不是第二步进行字段验证？