Magento 2 + Checkout Billing address Telephone Number Validation

Question

I have created a plugin for billing address phone number validation, but it's giving me an error

Exception #0 (Exception): Notice: Undefined index: dataScopePrefix in /var/www/html/test/vendor/magento/module-customer-custom-attributes/Block/Checkout/LayoutProcessor.php on line 139 

below is my code

Custom\BillingAddress\etc\di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="validate_telephone_checkout_layoutprocessor" type="Custom\BillingAddress\Plugin\LayoutProcessor" sortOrder="100"/>
    </type>
</config>

plugin -

Custom\BillingAddress\Plugin\LayoutProcessor.php

<?php
declare(strict_types=1);

namespace Custom\BillingAddress\Plugin;

class LayoutProcessor
{
    /**
     * Telephone number validation
     *
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    ) {
        if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['payments-list']['children']
        )) {
            foreach ($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                     ['payment']['children']['payments-list']['children'] as $key => $payment) {
                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
                ['telephone']['validation'] = ['phoneLax' => true];
            }
        }
        return $jsLayout;
    }
}

Answer 1

You added wrong validation type. Please replace validation type "phoneLax" to "validate-phoneLax" as shown in following code:

<?php
declare(strict_types=1);

namespace Custom\BillingAddress\Plugin;

class LayoutProcessor
{
    /**
     * Telephone number validation
     *
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    ) {
        if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['payments-list']['children']
        )) {
            foreach ($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                     ['payment']['children']['payments-list']['children'] as $key => $payment) {
                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
                ['telephone']['validation'] = ['validate-phoneLax' => true];    // Change validation type 'phoneLax' to 'validate-phoneLax'
            }
        }
        return $jsLayout;
    }
}

Answer 2

I have run into this in Magento 2.4 before, but it was not working because Process method is no longer available in Magento\Checkout\Block\Checkout\LayoutProcessor.

Basically "LayoutProcessor" class has been removed and instead \Magento\Checkout\Block\Checkout\LayoutProcessor\Interceptor class has been introduced.

Answer 3

I think you need to change '[payments-list]' into '[afterMethods]'. Please review this code sample, which adjusts the max_text_length and is compatible with Magento 2.4.3.

public function afterProcess(
\Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
array  $jsLayout) {
            $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']['children']['street'] = [
            'component' => 'Magento_Ui/js/form/components/group',
            'label' => __('Street Address'),
            'required' => true,
            'dataScope' => 'billingAddress.street',
            'provider' => 'checkoutProvider',
            'sortOrder' => 60,
            'type' => 'group',
            'additionalClasses' => 'street',
            'children' => [
                    [
                    'component' => 'Magento_Ui/js/form/element/abstract',
                    'config' => [
                        'customScope' => 'billingAddress',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input',
                        'label'=>'Street Address: Line 1'
                    ],
                    'label'=>'Street Address: Line 1',
                    'dataScope' => '0',
                    'provider' => 'checkoutProvider',
                    'validation' => ['required-entry' => true, "min_text_len‌​gth" => 1, "max_text_length" => 150],
                ],
                    [
                    'component' => 'Magento_Ui/js/form/element/abstract',
                    'config' => [
                        'customScope' => 'billingAddress',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input',
                        'label'=>'Street Address: Line 2'
                    ],
                    'label'=>'Street Address: Line 2',
                    'additionalClasses='>'additional',
                    'dataScope' => '1',
                    'provider' => 'checkoutProvider',
                    'validation' => ['required-entry' => false, "min_text_len‌​gth" => 1, "max_text_length" => 150],
                ]
            ]
            ];

     return $jsLayout;
 }