Add custom field with maxlength to WooCommerce checkout page - php

Question

I've added a new field for phone number in WooCommerce checkout form.
Everything is working perfectly except the maxlength = "10". After adding the snippet it shows maxlength = 10 when I inspect element, but the phone field allows me to type n number of characters.
Am I doing anything wrong?
Here is the snippet i used in 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'));
}

Answer 1

For the type you could use tel, and for the maxlength it is not necessary to put the number between quotes
So you get:
// 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 );
Optional: some validation for the custom (required) field
// 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 );
If type = number, you can use the min and max attributes
// 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 );
Although I wouldn't recommend it for a phone number, there is a reason that the type 'tel' exists, as used in other phonefields in WooCommerce