Блог

Я добавил новое поле для номера телефона в форму оформления заказа WooCommerce.

Все работает отлично, кроме maxlength = «10». После добавления фрагмента он показывает maxlength = 10, когда я проверяю элемент, но поле телефона позволяет мне ввести n количество символов.

Я делаю что-то не так?

Вот фрагмент, который я использовал в functions.php

 add_action('woocommerce_after_checkout_billing_form', 'custom_checkout_field');

function custom_checkout_field($checkout)
{
woocommerce_form_field('billing_phone_2', array(
'type' => 'number',
'maxlength' => "10",
'id' => 'billing_phone_2',
'class' => array(
'input-text form-row-wide'
) ,
'required'     => 'required' === get_option( 'woocommerce_checkout_phone_field', 'required' ),
'label' => __('Phone 2') ,
'placeholder' => __('') ,
) ,
$checkout->get_value('billing_phone_2'));
}
 

Для type вы могли бы использовать tel , а для maxlength нет необходимости ставить число между кавычками

Таким образом, вы получаете:

 // Display a custom checkout field after billing form
function action_woocommerce_after_checkout_billing_form( $checkout ) {

    woocommerce_form_field( 'billing_phone_2', array(
        'type'          => 'tel',
        'maxlength'     => 10,
        'class'         => array( 'form-row-wide' ),
        'required'      => true,
        'label'         => __( 'Phone 2', 'woocommerce' ),
        'placeholder'   => __( 'My placeholder', 'woocommerce' ),
    ), $checkout->get_value( 'billing_phone_2' ));

}
add_action( 'woocommerce_after_checkout_billing_form', 'action_woocommerce_after_checkout_billing_form', 10, 1 );
 

Необязательно: некоторая проверка для пользовательского (обязательного) поля

 // Custom checkout field validation
function action_woocommerce_checkout_process() {
    // Isset    
    if ( isset( $_POST['billing_phone_2'] ) ) {
        $domain = 'woocommerce';
        $phone = $_POST['billing_phone_2'];
        
        // Empty
        if ( empty ( $phone ) ) {
            wc_add_notice( __( 'Please enter a phone number to complete this order', $domain ), 'error' );
        }
        
        // Validates a phone number using a regular expression.
        if ( 0 < strlen( trim( preg_replace( '/[s#0-9_- /().]/', '', $phone ) ) ) ) {
            wc_add_notice( __( 'Please enter a valid phone number', $domain ), 'error' );
        }
    }
}
add_action( 'woocommerce_checkout_process', 'action_woocommerce_checkout_process', 10, 0 );
 

Если type = number , вы можете использовать атрибуты min и max

 // Display a custom checkout field after billing form
function action_woocommerce_after_checkout_billing_form( $checkout ) {

    woocommerce_form_field( 'billing_phone_2', array(
        'type'          => 'number',
        'custom_attributes' => array(
            'min'       =>  0,
            'max'       =>  9999999999,
        ),
        'class'         => array( 'form-row-wide' ),
        'placeholder'   => __( 'Phone 2', 'woocommerce' ),
    ), $checkout->get_value( 'billing_phone_2' ));

}
add_action( 'woocommerce_after_checkout_billing_form', 'action_woocommerce_after_checkout_billing_form', 10, 1 );
 

Хотя я бы не рекомендовал использовать его для номера телефона, существует причина, по которой тип ‘tel’ существует, как используется в других телефонных полях в WooCommerce