在 WooCommerce 和电话字段验证问题中添加自定义注册字段 [英] Add Custom registration fields in WooCommerce and phone field validation issue

问题描述

之前有人问过类似的问题，我尝试了所有解决方案，但由于某种原因，它们对我不起作用.

我的网站页脚中包含一个迷你 Woocommerce 注册字段，以便人们可以轻松注册.电话字段是必需的，但我想为其设置最小长度以减少输入假号码的人数.

我将以下代码添加到我的functions.php，(我将所有通知都包含在表单中，以便您可以更好地理解)占位符，一切正常，但我无法获得最小长度(设置使用模式"自定义属性)工作.

如果有人能帮我修复它，我将不胜感激.

此表格包含在我网站的页脚中:

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']));
    }


}

解决方案

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

这篇关于在 WooCommerce 和电话字段验证问题中添加自定义注册字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！