php - Add Custom registration fields in WooCommerce and phone field validation issue

Question

Similar questions have been asked before and I tried all the solutions but for some reason they won't work for me.

I have a mini Woocommerce registration field included in the footer of my site so that people can register easily. The phone field is required but I want to set a minimum length to it to reduce the number of people entering fake numbers.

I have the following codes added to my functions.php, (I'm including all the notifications to the form so that you can understand better) the placeholder and everything works but I can't get the minimum length (set using "pattern" custom attribute) to work.

If anyone can help me fix it, it'd be very much appreciated.

This form is included in the footer of my web site: wondercatspopup.com

The code I've added is:

 add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
    function custom_override_checkout_fields( $fields )
    {        

    $fields['billing']['billing_phone']['custom_attributes'] = array( "pattern" => ".{10,10}" );
         return $fields;    
    }

And this is the rest of the functions.php:

/**
 * To add WooCommerce registration form custom fields.
 */

function text_domain_woo_reg_form_fields() {
    ?>
   <div class="formumuz" style="display:flex;"> <p class="form-row form-row-first">
        <label style="display:none!important;" for="billing_first_name"><?php _e('First name', 'woocommerce'); ?><span class="required">*</span></label>
        <input style="width: 130px;
    display: inline-block; margin-right:1px;" type="text" class="woocommerce-Input woocommerce-Input--text input-text placeholder" placeholder="?sim / Name *" type="text" class="input-text" name="billing_first_name" id="billing_first_name" value="<?php if (!empty($_POST['billing_first_name'])) esc_attr_e($_POST['billing_first_name']); ?>" />


        <label style="display:none!important;" for="billing_last_name"><?php _e('Last name', 'woocommerce'); ?><span class="required">*</span></label>
        <input style="width: 130px;
    display: inline-block; margin-left:1px;" type="text" class="woocommerce-Input woocommerce-Input--text input-text placeholder" placeholder="Soyisim / Surname *" type="text" class="input-text" name="billing_last_name" id="billing_last_name" value="<?php if (!empty($_POST['billing_last_name'])) esc_attr_e($_POST['billing_last_name']); ?>" />
    </p></div>

     <p style="margin-bottom: 0px; margin-top: 10px;" class="form-row form-row-wide">

          <label style="display:none!important;" for="reg_billing_phone"><?php _e( 'Phone', 'woocommerce' ); ?></label>
          <input style="width:254px!important;" type="text" class="woocommerce-Input woocommerce-Input--text input-text placeholder" placeholder="Cep Telefonu / Mobile *" value="+905" name="billing_phone" id="reg_billing_phone" value="<?php esc_attr_e( $_POST['billing_phone'] ); ?>" /> *
      </p><br>

    <div class="clear"></div>
    <?php
}

add_action('woocommerce_register_form_start', 'text_domain_woo_reg_form_fields');


/**
 * To validate WooCommerce registration form custom fields.
 */
function text_domain_woo_validate_reg_form_fields($username, $email, $validation_errors) {
    if (isset($_POST['billing_first_name']) && empty($_POST['billing_first_name'])) {
        $validation_errors->add('billing_first_name_error', __('?sim alan? zorunludur! / Name field is required!', 'woocommerce'));
    }

    if (isset($_POST['billing_last_name']) && empty($_POST['billing_last_name'])) {
        $validation_errors->add('billing_last_name_error', __('Soyisim alan? zorunludur! / Surname field is required!', 'woocommerce'));
    }

     if (isset($_POST['billing_phone']) && empty($_POST['billing_phone'])) {
        $validation_errors->add('billing_phone_error', __('Telefon alan? zorunludur! / Phone field is required!', 'woocommerce'));
    }


    return $validation_errors;
}




add_action('woocommerce_register_post', 'text_domain_woo_validate_reg_form_fields', 10, 3);

/**
 * To save WooCommerce registration form custom fields.
 */
function text_domain_woo_save_reg_form_fields($customer_id) {
    //First name field
    if (isset($_POST['billing_first_name'])) {
        update_user_meta($customer_id, 'first_name', sanitize_text_field($_POST['billing_first_name']));
        update_user_meta($customer_id, 'billing_first_name', sanitize_text_field($_POST['billing_first_name']));
    }
    //Last name field
    if (isset($_POST['billing_last_name'])) {
        update_user_meta($customer_id, 'last_name', sanitize_text_field($_POST['billing_last_name']));
        update_user_meta($customer_id, 'billing_last_name', sanitize_text_field($_POST['billing_last_name']));
    }
     //Phone field
    if (isset($_POST['billing_phone'])) {
        update_user_meta($customer_id, 'phone', sanitize_text_field($_POST['billing_phone']));
        update_user_meta($customer_id, 'billing_phone', sanitize_text_field($_POST['billing_phone']));
    }


}

Answer 1

Note: Your special registration form located in the footer is something different than WooCommerce checkout fields.

In your code the hook for your validating function text_domain_woo_validate_reg_form_fields() is just missing. There is also some small errors (corrected)…

The best place to check the submitted data is your validation function and you should also need to add another one for checkout too (instead of using a custom pattern for checkout phone field, that is used to format data).

So all your related code should be:

## --- FOR CHECKOUT --- ##

// Checkout billing phone validation (Checking length)
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
function my_custom_checkout_field_process() {
    if ( $_POST['billing_phone'] && strlen($_POST['billing_phone']) < 10 )
        wc_add_notice( __('Please type a correct phone number…', 'woocommerce'), 'error' );
}

## --- FOR CUSTOM REGISTRATION FORM --- ##

// Add custom fields to registration form.
add_action('woocommerce_register_form_start', 'text_domain_woo_reg_form_fields');
function text_domain_woo_reg_form_fields() {
    ?>
    <div class="formumuz" style="display:flex;">
        <p class="form-row form-row-first">
            <label style="display:none!important;" for="billing_first_name"><?php _e('First name', 'woocommerce'); ?><span class="required">*</span></label>
            <input style="width: 130px; display: inline-block; margin-right:1px;" type="text" class="woocommerce-Input woocommerce-Input--text input-text placeholder" placeholder="?sim / Name *" type="text" class="input-text" name="billing_first_name" id="billing_first_name" value="<?php if (!empty($_POST['billing_first_name'])) esc_attr_e($_POST['billing_first_name']); ?>" />
        </p>
        <p class="form-row form-row-last">
            <label style="display:none!important;" for="billing_last_name"><?php _e('Last name', 'woocommerce'); ?><span class="required">*</span></label>
            <input style="width: 130px; display: inline-block; margin-left:1px;" type="text" class="woocommerce-Input woocommerce-Input--text input-text placeholder" placeholder="Soyisim / Surname *" type="text" class="input-text" name="billing_last_name" id="billing_last_name" value="<?php if (!empty($_POST['billing_last_name'])) esc_attr_e($_POST['billing_last_name']); ?>" />
        </p>
    </div>
    <p style="margin-bottom: 0px; margin-top: 10px;" class="form-row form-row-wide">
        <label style="display:none!important;" for="reg_billing_phone"><?php _e( 'Phone', 'woocommerce' ); ?></label>

        <!--  "You can’t have 2 times the value attribute and you can use "tel" type … (to be removed)" -->
        <input style="width:254px!important;" type="tel" class="woocommerce-Input woocommerce-Input--text input-text placeholder" placeholder="Cep Telefonu / Mobile *" name="billing_phone" id="reg_billing_phone" value="<?php esc_attr_e( $_POST['billing_phone'] ); ?>" /> *
    </p><br>
    <div class="clear"></div>
    <?php
}

// Checking & validation of custom fields in registration form.
add_action('woocommerce_register_post', 'text_domain_woo_validate_reg_form_fields', 10, 3);
function text_domain_woo_validate_reg_form_fields( $username, $email, $validation_errors ) {
    if (isset($_POST['billing_first_name']) && empty($_POST['billing_first_name'])) {
        $validation_errors->add('billing_first_name_error', __('?sim alan? zorunludur! / Name field is required!', 'woocommerce'));
    }
    if (isset($_POST['billing_last_name']) && empty($_POST['billing_last_name'])) {
        $validation_errors->add('billing_last_name_error', __('Soyisim alan? zorunludur! / Surname field is required!', 'woocommerce'));
    }
    if (isset($_POST['billing_phone']) && empty($_POST['billing_phone'])) {
        $validation_errors->add('billing_phone_error', __('Telefon alan? zorunludur! / Phone field is required!', 'woocommerce'));
    }

    // ==> CHECKING PHONE LENGTH (10 character minimal) <==
    if (isset($_POST['billing_phone']) && strlen($_POST['billing_phone']) < 10 ) {
        $validation_errors->add('billing_phone_error', __('Please type a correct phone number…', 'woocommerce'));
    }
    return $validation_errors;
}

// Add custom fields to registration form.
add_action( 'woocommerce_created_customer', 'custom_save_extra_register_fields' ); // <==== Missing
function custom_save_extra_register_fields($customer_id) {
    //First name field
    if (isset($_POST['billing_first_name'])) {
        update_user_meta($customer_id, 'first_name', sanitize_text_field($_POST['billing_first_name']));
        update_user_meta($customer_id, 'billing_first_name', sanitize_text_field($_POST['billing_first_name']));
    }
    //Last name field
    if (isset($_POST['billing_last_name'])) {
        update_user_meta($customer_id, 'last_name', sanitize_text_field($_POST['billing_last_name']));
        update_user_meta($customer_id, 'billing_last_name', sanitize_text_field($_POST['billing_last_name']));
    }
     //Phone field
    if (isset($_POST['billing_phone'])) {
        update_user_meta($customer_id, 'phone', sanitize_text_field($_POST['billing_phone']));
        update_user_meta($customer_id, 'billing_phone', sanitize_text_field($_POST['billing_phone']));
    }
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Tested and works

Each time the phone number minimal length will be checked and display this alert (if needed):