php - WooCommerce Fields Validation on MultiStep Checkout page
i have this problem, and need your help to resolve it. I use MultiStep Checkout form, and all seems fine, except fields validation. I have 3 steps
Billing > Payment > Order Confirmation
Issue is that when left empty required field into "Billing" step, Woocommerce allow me to go to "Payment" step, and there show me error that required field is not filled. I want that check to be executed in "Billing" step. I checked into form-checkout.php, and found that navigation is made by this 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>
and this is php code:
<?php if ($thegem_checkout_type == 'multi-step'): ?>
<div >
<?php if(is_user_logged_in() || 'no' === get_option( 'woocommerce_enable_checkout_login_reminder' )): ?>
<div data-tab-id="checkout-billing"><?php esc_html_e('1. Facturation','thegem'); ?></div>
<div data-tab-id="checkout-payment"><?php esc_html_e('2. Paiement','thegem'); ?></div>
<div data-tab-id="checkout-confirmation"><?php esc_html_e('3. Confirmation','thegem'); ?></div>
<?php else: ?>
<div data-tab-id="checkout-signin"><?php esc_html_e('1. Se connecter','thegem'); ?></div>
<div data-tab-id="checkout-billing"><?php esc_html_e('2. Facturation','thegem'); ?></div>
<div data-tab-id="checkout-payment"><?php esc_html_e('3. Paiement','thegem'); ?></div>
<div data-tab-id="checkout-confirmation"><?php esc_html_e('4. Confirmation','thegem'); ?></div>
<?php endif; ?>
</div>
So my question is how to made fields verification on first step instead of second one?