Remove required validation once WooCommerce checkout field is hidden

Question

I have a set of checkout fields which contains select field that includes 3 options. When customer goes to WooCommerce checkout page, initially I am hiding the fields (billing_address_1, billing_address_2, billing_city_field). By default these fields are required. So when I am trying to hide the fields based on one custom select option field, and when user clicks on Place order button, required validation is throwing.

This is what I am expecting:

Initially the required fields are hidden from user.
When Customer selects the dropdown value other than default (upload only : option value), required fields should be visible.

Above are working fine, but the problem is even though the fields are hidden still it's showing validation error.

Dropdown html snippet:

<p class="form-row form-row-wide validate-required thwcfe-input-field-wrapper validate-required woocommerce-validated" id="delivery_mode_field" data-priority="20" data-rules="" data-rules-action="" data-validations="validate-required"><label for="delivery_mode" class="">Delivery Mode&nbsp;<abbr class="required" title="required">*</abbr></label> <span class="woocommerce-input-wrapper"><select name="delivery_mode" id="delivery_mode" class="select thwcfe-input-field thwcfe-price-field thwcfe-price-option-field thwcfe-enhanced-select select2-hidden-accessible enhanced" data-placeholder="Delivery Mode" data-price-label="Delivery Mode" data-taxable="no" data-tax-class="" tabindex="-1" aria-hidden="true">
    <option value="upload only" data-price="100" data-price-type="">
        Upload only - Safe office custody (+₹100.00)
    </option>

    <option value="registered post" data-price="175" data-price-type="">
        Registered India Post (+₹175.00)
    </option>

    <option value="speed post" data-price="200" data-price-type="">
        Speed Post (+₹200.00)
    </option>

    <option value="special courier" data-price="250" data-price-type="">
        Professional Courier (+₹250.00)
    </option>
</select> <span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="ltr" style="width: 576px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-delivery_mode-container"><span class="select2-selection__rendered" id="select2-delivery_mode-container" title="Registered India Post (+₹175.00)"><span class="select2-selection__clear">×</span>Registered India Post (+₹175.00)</span> </span></span> </span></span></p>

Billing Street Address html snippet:

<p class="form-row address-field validate-required thwcfe-input-field-wrapper validate-required form-row-wide woocommerce-invalid woocommerce-invalid-required-field" id="billing_address_1_field" data-priority="60" data-rules="" data-rules-action="" data-validations="validate-required">
    <label for="billing_address_1" class="">Street address&nbsp;<abbr class="required" title="required">*</abbr></label>
    <span class="woocommerce-input-wrapper"><input type="text" class="input-text thwcfe-input-field" name="billing_address_1" id="billing_address_1" placeholder="House number and street name" value="" autocomplete="address-line1"></span></p>

functions.php

add_action( 'woocommerce_after_checkout_form', 'conditionally_hide_show_checkout_field', 9999 );

function conditionally_hide_show_checkout_field() {
   wc_enqueue_js( "
   
      jQuery('#billing_address_1').hide(function(){
        jQuery(this).removeClass('validate-required');
        jQuery(this).removeClass('woocommerce-validated');
      });
      
       jQuery('#delivery_mode').on('change', function() {
          if (jQuery(this).val() !== 'upload only') {
                jQuery('#billing_address_1').show(function() {
                jQuery(this).addClass('validate-required');
              });
           } else {
                jQuery('#billing_address_1').hide(function(){
                jQuery(this).removeClass('validate-required');
                jQuery(this).removeClass('woocommerce-validated');
          });
         }
       });
   ");
}

But still I am getting the validation error. How can I remove those validation error? I tried this but not able to figure out.

Any help would be really appreciated.

You need to do the contrary, meaning set your field to hide as optional by default, then when the field is visible you will make it as required with jquery and you will use checkout validation for this field… — LoicTheAztec, Oct 26 '20 at 14:03
@loictheaztec could you pls provide a sample snippet if possible? — Vishnu, Oct 26 '20 at 14:55
Please donot close the question.. struggling with this for a long time. Help needed.. — Vishnu, Oct 26 '20 at 15:00

score 1 · Answer 1 · answered Dec 30 '20 at 17:09

To remove Validation from the address field add the below code in functions.php file

// Make address field optional
add_filter( 'woocommerce_default_address_fields' , 'nm_set_address_optional' ,99999 );
function nm_set_address_optional( $b_fields ) {
    $b_fields['address_1']['required'] = false;
    $b_fields['address_2']['required'] = false;
    $b_fields['city']['required'] = false;
    return $b_fields;
}

Remove required validation once WooCommerce checkout field is hidden

1 Answers1