将具有 maxlength 的自定义字段添加到 WooCommerce 结帐页面答案

【问题标题】：Add custom field with maxlength to WooCommerce checkout page将具有 maxlength 的自定义字段添加到 WooCommerce 结帐页面
【发布时间】：2021-04-30 04:19:31
【问题描述】：

我在 WooCommerce 结帐表单中添加了一个新的电话号码字段。

除了 maxlength = "10" 之外，一切都运行良好。添加 sn-p 后，当我检查元素时它显示 maxlength = 10，但电话字段允许我输入 n 个字符。

我做错了什么吗？

这是我在functions.php中使用的sn-p

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

【问题讨论】：

标签： php wordpress woocommerce checkout custom-fields

【解决方案1】：

对于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 中的其他电话字段中所使用的那样

【讨论】：

感谢您的回复。电话字段不应接受字母和任何其他字符。这就是为什么我使用类型作为数字。有什么办法吗？
我已经更新了我的答案，虽然我不推荐它作为电话号码。存在“tel”类型是有原因的，正如在 WooCommerce 中的其他电话字段中使用的那样。如果只允许使用数字字符，则可以通过字段验证进行检查。
感谢您的快速回复和推荐。我会记住这一点
更新后的答案不起作用...你能帮我解决这个问题吗？
1) 我可以确认我的答案有效。 2)“它不起作用”就像天空是蓝色的，太阳是黄色的一样。您必须提供更多详细信息，而不仅仅是“它不起作用”。