Add radio buttons with validation on My account > edit account in WooCommerce

Question

Via the code below I have added radio buttons on the on the profile page of My account in WooCommerce.

The issue is I can't make the radio button required & can't display a notice when no choice is made.

Here is my code...

HTML

// Add & display radio
      <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <div class="myAccount_radiobtn">

  <label for="gender"><?php esc_html_e( 'Gender', '' ); ?>&nbsp;<span class="required">*</span></label>

  <div class="my_account_profile_radio">
    <input type="radio" required name="gender" id="gender value="Male" <?php if('Male'==esc_attr(get_the_author_meta('gender',$user->ID ))) echo 'checked="checked"'; ?> class="radio" />&nbsp;&nbsp;Male<br /> 

    <input type="radio" required name="gender" id="gender value="Female" <?php if('Female'==esc_attr(get_the_author_meta('gender',$user->ID ))) echo 'checked="checked"'; ?> class="radio" />&nbsp;&nbsp;Female<br /> 

    <input type="radio" required name="gender" id="gender value="Others" <?php if ('Others'==esc_attr(get_the_author_meta('gender',$user->ID ))) echo 'checked="checked"'; ?> class="radio" />&nbsp;&nbsp;Others 
  </div>

</div>
</p>

PHP

// Save radio
    function save_user_account_details( $user_id ) {
      if( isset( $_POST['gender'] ) )
          update_user_meta( $user_id, 'gender', sanitize_text_field( $_POST['gender'] ) ); 
    }
    add_action( 'woocommerce_save_account_details', 'save_user_account_details', 12, 1 );


    // Validation radio
    function myaccount_fields_validation2 ( $errors  ) {
      if ( isset( $_POST['gender'] ) ) {
          if(strlen($_POST['gender'])<4 ) 
          $errors->add( 'error', __( '<strong>Gender</strong> is a required field.', '' ),'');
      }

    }
    add_action( 'user_profile_update_errors','myaccount_fields_validation2', 10, 1 );

Any advice?

Answer 1

Your code contains some mistakes/errors

• The <div> tag can NOT be inside <p> tag, because the paragraph will be broken at the point, where the <div> tag is entered.
• Setting required for all inputs is more clear, but not necessary (unless dynamically generating radio-buttons).
• You have a typo on ID, it will not close properly due to the lack of a "
• The user_profile_update_errors hook does not apply here, use woocommerce_save_account_details_errors instead
• Although the code for creating the radio buttons can be added, by modifying the template file I added it in my answer via a hook for clarity.

So you get:

// Add field
function action_woocommerce_edit_account_form_start() {
    // Retrieve the current user object.
    $user = wp_get_current_user();
    ?>
    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="gender"><?php esc_html_e( 'Gender', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="radio" class="radio" name="gender" value="Male" <?php if( 'Male' == esc_attr( get_the_author_meta( 'gender', $user->ID ) ) ) echo 'checked'; ?>>&nbsp;&nbsp;Male<br /> 
        <input type="radio" class="radio" name="gender" value="Female" <?php if( 'Female' == esc_attr( get_the_author_meta( 'gender', $user->ID ) ) ) echo 'checked'; ?>>&nbsp;&nbsp;Female<br /> 
        <input type="radio" class="radio" name="gender" value="Others" <?php if ( 'Others' == esc_attr( get_the_author_meta( 'gender', $user->ID ) ) ) echo 'checked'; ?>>&nbsp;&nbsp;Others 
    </p>
    <?php
}
add_action( 'woocommerce_edit_account_form_start', 'action_woocommerce_edit_account_form_start' );

// Validate - my account
function action_woocommerce_save_account_details_errors( $args ) {
    if ( ! isset( $_POST['gender'] ) ) {
        $args->add( 'error', '<strong>' . __( 'Gender', 'woocommerce' ) . '</strong> ' . __( 'is a required field.', 'woocommerce' ) );
    }
}
add_action( 'woocommerce_save_account_details_errors', 'action_woocommerce_save_account_details_errors', 10, 1 );

// Save - my account
function action_woocommerce_save_account_details( $user_id ) {
    if ( isset( $_POST['gender'] ) ) {
        // Update field
        update_user_meta( $user_id, 'gender', sanitize_text_field( $_POST['gender'] ) );
    }
}
add_action( 'woocommerce_save_account_details', 'action_woocommerce_save_account_details', 10, 1 );