PHP - validation message appears even though I have filled in the required fields

Question

I am seeing a strange issue on my test website. The website can be viewed here and it's a test site so there's no payment (an no payment details entry is required).

https://puffpastrydelights.com/order-online/

So what I am trying to do is ensure the user has provided a delivery date or time if they choose delivery, or ensure they have provided a pickup date and time if they choose pickup.

So for replication, if you order a food item, in the shopping cart select pickup and then in the checkout page fill all the details, your checkout will process and everything is fine.

Now try the same again but this time select delivery in the cart page before you head to checkout, you will see it will show a validation error stating to provide delivery date and time even though you have. It's this I am unsure on and can't see in my code what's causing this issue:

// Hide Local Pickup shipping method
add_filter( 'woocommerce_checkout_fields', 'hide_local_pickup_method');
function hide_local_pickup_method( $fields_pickup) {    
    // change below for the method
    $shipping_method_pickup ='local_pickup:2';
    // change below for the list of fields. Add (or delete) the field name you want (or don’t want) to use
    $hide_fields_pickup = array( 'billing_company', 'billing_state', 'billing_company');
    $shipping_fields_pickup = array( 'shipping_first_name', 'shipping_last_name', 'shipping_company', 'shipping_address_1', 'shipping_address_2', 'shipping_city', 'shipping_postcode');
     $hide_pickup_date_time = array( 'pickup_date', 'pickup_time');
     $hide_delivery_date_time = array( 'delivery_date', 'delivery_time');
    
    $chosen_methods_pickup = WC()->session->get( 'chosen_shipping_methods' );
    $chosen_shipping_pickup = $chosen_methods_pickup[0];
 
    foreach($hide_fields_pickup as $field_pickup ) {
        if ($chosen_shipping_pickup == $shipping_method_pickup) {
            $fields_pickup['billing'][$field_pickup]['required'] = false;
            $fields_pickup['billing'][$field_pickup]['class'][] = 'hide_pickup';
        }
        $fields_pickup['billing'][$field_pickup]['class'][] = 'billing-dynamic_pickup';
    }
    
        foreach($shipping_fields_pickup as $shipping_field ) {
        if ($chosen_shipping_pickup == $shipping_method_pickup) {
            $fields_pickup['shipping'][$shipping_field]['required'] = false;
        }
    }
        
    foreach($hide_pickup_date_time as $pickup_date_time ) {
        if ($chosen_shipping_pickup != $shipping_method_pickup) {
            $fields_pickup['order'][$pickup_date_time]['required'] = false;
        }
    }
    
    foreach($hide_delivery_date_time as $delivery_date_time ) {
        if ($chosen_shipping_pickup != $shipping_method_pickup) {
            $fields_pickup['order'][$delivery_date_time]['required'] = false;
        }       
    }
    
    return $fields_pickup;
}

/**
 * Process the checkout
 */
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
     $shipping_method_pickup ='local_pickup:2';
     $chosen_methods_pickup = WC()->session->get( 'chosen_shipping_methods' );
     $chosen_shipping_pickup = $chosen_methods_pickup[0];
    
    
    // Check if set, if its not set add an error.
   if ($chosen_shipping_pickup == $shipping_method_pickup) {
    if ( ! $_POST['pickup_date'] ){
        wc_add_notice( __( 'Please provide a Pickup Date.' ), 'error' );
     }
    
    if ( ! $_POST['pickup_time'] ){
        wc_add_notice( __( 'Please provide a Pickup Time.' ), 'error' );
     }
     } else {
         if ( ! $_POST['delivery_date'] ){
        wc_add_notice( __( 'Please provide a Delivery Date.' ), 'error' );
     }
    
    if ( ! $_POST['delivery_time'] ){
        wc_add_notice( __( 'Please provide a Delivery Time.' ), 'error' );
     }
     }
}

These fields are custom fields and are set below like so:

add_action('woocommerce_before_order_notes', 'custom_checkout_field');

function custom_checkout_field($checkout)
{
    echo '<div id="custom_checkout_field"><h3>' . __('Pickup/Delivery') . '</h3>';

    woocommerce_form_field(
        'delivery_date',
        array(

            'type' => 'date',
            'required' => 'true',
            'class' => array(

                'delivery-date-class form-row-wide'

            ),
            'label' => __('Delivery Date'),
        ),
        $checkout->get_value('delivery_date')
    );

    woocommerce_form_field(
        'delivery_time',
        array(

            'type' => 'time',
            'required' => 'true',
            'class' => array(

                'delivery-time-class form-row-wide'

            ),
            'label' => __('Delivery Time'),
        ),
        $checkout->get_value('delivery_time')
    );

    woocommerce_form_field(
        'pickup_date',
        array(

            'type' => 'date',
            'required' => 'true',
            'class' => array(

                'pickup-date-class form-row-wide'

            ),
            'label' => __('Pickup Date'),
        ),
        $checkout->get_value('pickup_date')
    );

    woocommerce_form_field(
        'pickup_time',
        array(

            'type' => 'time',
            'required' => 'true',
            'class' => array(

                'pickup-time-class form-row-wide'

            ),
            'label' => __('Pickup Time'),
        ),
        $checkout->get_value('pickup_time')
    );
    
    echo '</div>';
}

Answer 1

Your code is correct, no errors.

The problem is that you have two HTML elements with the same id (and name) on the checkout page.

The fields are:

• delivery_date there is a date input field and a text input field with this id (and name)
• delivery_time there is a time input field and a text input field with this id (and name)
• pickup_date there is a date input field and a text input field with this id (and name)
• pickup_time there is a time input field and a text input field with this id (and name)

As you can see from this screenshot (the text input fields are hidden):

Try removing the text input fields or, if needed, change the id attribute value to be unique on the page.

In the code you published there is no reference to the text input fields, most likely they are in your functions.php.