隐藏 WooCommerce 结帐字段后删除所需的验证

Posted 2023-02-19

【中文标题】隐藏 WooCommerce 结帐字段后删除所需的验证

【英文标题】：Remove required validation once WooCommerce checkout field is hidden

【发布时间】：2021-02-08 18:57:26

【问题描述】：

我有一组结帐字段，其中包含包含 3 个选项的选择字段。当客户转到 WooCommerce 结帐页面时，最初我隐藏了字段（billing_address_1、billing_address_2、billing_city_field）。默认情况下，这些字段是必需的。因此，当我试图隐藏基于一个自定义选择选项字段的字段时，并且当用户单击“下订单”按钮时，会抛出所需的验证。

这是我所期待的：

最初，必填字段对用户隐藏。 当客户选择默认值以外的下拉值（仅上传：选项值）时，必填字段应可见。

以上工作正常，但问题是即使字段被隐藏，它仍然显示验证错误。

下拉html sn-p:

<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>

账单街道地址 html sn-p:

<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');
          );
         
       );
   ");

但我仍然收到验证错误。如何消除这些验证错误？我试过这个，但无法弄清楚。

任何帮助将不胜感激。

【问题讨论】：

您需要做相反的事情，这意味着将您的字段设置为默认隐藏为可选，然后当该字段可见时，您将根据 jquery 的要求进行设置，您将对该字段使用结帐验证...

@loictheaztec 如果可能，您能否提供一个示例 sn-p？

请不要关闭问题..为此苦苦挣扎了很长时间。需要帮助..

这对我来说太宽泛了……刚刚重新打开了线程。

【参考方案1】：

要从地址字段中删除验证，请在 functions.php 文件中添加以下代码

// 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;