WooCommerce Checkout — требуется ввод, если флажок установлен

avatar
Dominik
1 июля 2021 в 21:21
221
2
0

В моей форме проверки WooCommerce у меня есть дополнительный флажок, который отображает новый ввод при выборе. Я хотел бы, чтобы этот ввод требовался, когда флажок установлен. Можно ли это как-то решить с помощью JavaScript, не вмешиваясь напрямую в код формы?

прикрепляю скрины вида: скриншот1, скриншот2.

Возможно, у вас есть другие идеи, как это сделать правильно?

<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>
Источник
Chris G
1 июля 2021 в 21:29
0

В общем, вы можете добавить событие прослушивателя input в флажок, а затем установить/снять требуемый атрибут, да.

Nikita TSB
1 июля 2021 в 22:13
0

если вы предоставите html-форму со всеми элементами (скрытыми), я могу помочь с jquery

Dominik
1 июля 2021 в 22:56
0

@NikitaTSB Я добавил код формы в сообщение.

Nikita TSB
2 июля 2021 в 21:30
0

@Доминик, я отредактировал свой ответ

Ответы (2)

avatar
Dominik
3 июля 2021 в 11:11
0

Я решил свою проблему с помощью приведенного ниже сценария

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');
    }
});
});
avatar
Nikita TSB
1 июля 2021 в 22:19
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>

Для игры:

$('.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>