Woocommerce Question posted in
The official Woocommerce documentation can be found here.

WooCommerce Checkout – Input required if checkbox is checked

In my WooCommerce checkout form, I have an additional checkbox that displays a new input when selected.
I would like this input to be required when the checkbox is checked.
Can I solve it somehow using JavaScript without interfering directly with the form’s code?

I attach screenshots of the form:
screenshot1,
screenshot2.

Possibly you have other ideas on how to do it properly?

<p class="form-row form-row-first validate-required woocommerce-invalid woocommerce-invalid-required-field" id="billing_first_name_field" data-priority="10">
<label for="billing_first_name" class="">First name&nbsp;<abbr class="required" title="pole wymagane">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="Dominik" autocomplete="given-name">
</span>
</p>
<p class="form-row form-row-last validate-required woocommerce-invalid woocommerce-invalid-required-field" id="billing_last_name_field" data-priority="20">
<label for="billing_last_name" class="">Last name&nbsp;<abbr class="required" title="pole wymagane">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_last_name" id="billing_last_name" placeholder="" value="Test" autocomplete="family-name">
</span>
</p>
<p class="form-row form-row-wide" id="billing_company_field" data-priority="30">
<label for="billing_company" class="">Company name&nbsp;<span class="optional">(optional)</span></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_company" id="billing_company" placeholder="" value="" autocomplete="organization">
</span>
</p>
<p class="form-row form-row-wide woocommerce-validated" id="billing_invoice_ask_field" data-priority="30">
<span class="woocommerce-input-wrapper">
<label class="checkbox">
<input type="checkbox" class="input-checkbox " name="billing_invoice_ask" id="billing_invoice_ask" value="1"> I want to receive an invoice<span class="optional">(optional)</span>
</label>
</span>
</p>
<p class="form-row form-row-wide" id="billing_vat_number_field" data-priority="30" style="display: none;">
<label for="billing_vat_number" class="">VAT Number</label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_vat_number" id="billing_vat_number" placeholder="" value="">
</span>
</p>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved my problem with the script below

    jQuery(function ($) {
                $('#billing_invoice_ask').change(function(){
    if($(this).is(":checked")) {
        $('#billing_vat_number_field').addClass('validate-required');
    } else {
        $('#billing_vat_number_field').removeClass('validate-required');
    }
});
});

  2. 0 
    $('.input-checkbox').change(function(){
      $('#billing_vat_number_field').toggle();
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="form-row form-row-first validate-required woocommerce-invalid woocommerce-invalid-required-field" id="billing_first_name_field" data-priority="10">
<label for="billing_first_name" class="">First name&nbsp;<abbr class="required" title="pole wymagane">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="Dominik" autocomplete="given-name">
</span>
</p>
<p class="form-row form-row-last validate-required woocommerce-invalid woocommerce-invalid-required-field" id="billing_last_name_field" data-priority="20">
<label for="billing_last_name" class="">Last name&nbsp;<abbr class="required" title="pole wymagane">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_last_name" id="billing_last_name" placeholder="" value="Test" autocomplete="family-name">
</span>
</p>
<p class="form-row form-row-wide" id="billing_company_field" data-priority="30">
<label for="billing_company" class="">Company name&nbsp;<span class="optional">(optional)</span></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_company" id="billing_company" placeholder="" value="" autocomplete="organization">
</span>
</p>
<p class="form-row form-row-wide woocommerce-validated" id="billing_invoice_ask_field" data-priority="30">
<span class="woocommerce-input-wrapper">
<label class="checkbox">
<input type="checkbox" class="input-checkbox " name="billing_invoice_ask" id="billing_invoice_ask" value="1"> I want to receive an invoice<span class="optional">(optional)</span>
</label>
</span>
</p>
<p class="form-row form-row-wide" id="billing_vat_number_field" data-priority="30" style="display: none;">
<label for="billing_vat_number" class="">VAT Number</label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_vat_number" id="billing_vat_number" placeholder="" value="">
</span>
</p>

    To play around:

    $('.check').change(function(){
   var is_hidden = $('input[type="text"]').prop('hidden');
   var make_hidden = true;
   if (is_hidden === true){
       make_hidden = false;
   }
   $('input[type="text"]').prop('hidden', make_hidden);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"><label>Check</label>

<input type="text" hidden>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search