Woocommerce 中的条件自定义结帐字段验证问题

Question

我有一个复选框，如果选中它会打开一个下拉字段（要求）。如果您尝试发送 Woocommerce 订单，它会有条件地检查该字段是否有内容，如果没有则 returns 出错。

当需求字段确实有信息输入时，这一切都可以接受，它仍然将其视为没有内容并且 returns 错误。

因为这是表单应该工作的基本方式，所以我不明白为什么我会得到这样的结果。这是代码：

/**
 * Add a message field to the WC checkout
 */
add_action( 'woocommerce_before_checkout_form', 'custom_checkout_field' );

function custom_checkout_field( $checkout ) {

    echo '<div id="message"><h3>' . __( '<i class="fas fa-envelope"></i> Message' ) . '</h3><p style="margin: 0 0 8px;">Would you like to leave a message?</p>';

        woocommerce_form_field( 'checkbox', array(
            'type'  => 'checkbox',
            'class' => array( 'msg-checkbox' ),
            'label' => __( 'Yes' ),
        ), $checkout->get_value( 'checkbox' ) );

    woocommerce_form_field( 'requirements', array(
        'type'          => 'text',
        'class'         => array('msg'),
        'label'         => __('Please input your message.'),
        'placeholder'   => __(''),
        ), $checkout->get_value( 'requirements' ));

    echo '</div>';

}

/**
 * Process checkout with additional custom field
 */
add_action('woocommerce_checkout_process', 'custom_checkout_field_process');

function custom_checkout_field_process() {

    // Check if set, if not add an error.

    if(isset($_POST['checkbox']) && ( empty($_POST['requirements'])));

        wc_add_notice( __( 'Please let us know what you would like to do' ), 'error' );
}

我希望这是有道理的。基本上它在一定程度上可以工作，但是输入字段的验证在有内容时不起作用。

谢谢。

Answer 1

Update: Code improvements and added a show/hide functionality with jQuery

唯一的问题来自您用于自定义结帐字段的挂钩。它将这些字段输出到结帐表单之外，因此这些值永远不会被提交并且始终为空。

相反，您将使用 woocommerce_checkout_before_customer_details 操作挂钩作为您的第一个挂钩函数，这一次将在结帐表单 中输出这些字段：

// Output custom checkout fields
add_action( 'woocommerce_checkout_before_customer_details', 'custom_checkout_field_before_billing' );
function custom_checkout_field_before_billing() {
    $domain = 'woocommerce';

    // Hide the message text field on load
    ?>
    <style>p#requirements_field{display:none;}</style>

    <div id="message">
    <h3><i class="fa fa-envelope"></i><?php _e( 'Message', 'woocommerce' ); ?></h3>
    <?php

    woocommerce_form_field( 'checkbox_msg', array(
        'type'  => 'checkbox',
        'class' => array( 'msg-checkbox' ),
        'label' => __( 'Would you like to leave a message?', 'woocommerce' ),
    ), WC()->checkout->get_value( 'cb_msg' ));

    woocommerce_form_field( 'requirements', array(
        'type'              => 'text',
        'class'             => array('msg t_msg'),
        'label'             => __('Please input your message.'),
        'placeholder'       => __(''),
    ), WC()->checkout->get_value( 'requirements' ));

    echo '</div>';

    // jQuery: show hide the text requirement field
    ?><script>
    jQuery(document).ready(function($) {
        var a = '#requirements_field';
        $('input#checkbox_msg').change( function(){
            if( $(this).is(':checked') )
                $(a).show();
            else
                $(a).hide();
        });
    });
    </script><?php
}

// Process checkout with additional custom field
add_action('woocommerce_after_checkout_validation', 'custom_checkout_field_validation_process', 20, 2 );
function custom_checkout_field_validation_process( $data, $errors ) {

    // Check if set, if not add an error.
    if( isset($_POST['checkbox_msg']) && empty($_POST['requirements']) )
        $errors->add( 'requirements', __( "Please let us know what you would like to do filling up the message field.", "woocommerce" ) );
}

代码进入您的活动子主题（或活动主题）的 function.php 文件。 已测试并有效。