Woocommerce checkout field required only if visible

Question

I'm trying to make the 'business' field in woocommerce checkout required, but only IF the field is actually showing.

I created a radio button field with woocommerce_form_field that displays two options. using javascript I toggle the visibility of the 'business' input field when the radio buttons are checked:

jQuery(document).ready(function () {
$('input[type=radio][name=customer_type]').on('change', function () {
    $('.checkout-bedrijfsnaam').slideToggle();
}); });

default css for the 'business' input is:

.checkout-bedrijfsnaam { display:none; }

Also i made the 'business' field required using the Woocommerce filters 'woocommerce_billing_fields' and 'woocommerce_shipping_fields':

$address_fields['billing_company']['required'] = true;

that's all going great, however: When the 'business' field is toggled off and is not showing, I get a 'field is required' warning and cannot submit the form. Would it be possible to make the field required, but only when it's actually showing?

I know it has to be, since the fields on the shipping_fields behave in the same manner (not required when checkbox is not checked) but I can't get my head around it.

Answer 1

If the check is only client-side then instead of hiding it with display: none; you might want to remove it from the DOM. When you need it you append it again. You already have the toggle for it so.