Address Validation in checkout page in Magento 2

Question

I want to validate street address line 1 & 2 with maximum 40 character and without special character. I am using below code for this but it's not working for me.

etc/di.xml

<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="add-street-field"  type="X\Y\Model\Checkout\LayoutProcessorPlugin" sortOrder="1"/>
    </type>
</config>

Model\Checkout\LayoutProcessorPlugin.php

public function afterProcess(
    \Magento\Checkout\Block\Checkout\LayoutProcessor $subject, array $jsLayout
    ) {

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['billingAddress']['children']['shipping-address-fieldset']['children']['street'] = [
            'component' => 'Magento_Ui/js/form/components/group',
            'label' => __('Street Address Custom Validation'),
            'required' => true,
            'dataScope' => 'billingAddress.street',
            'provider' => 'checkoutProvider',
            'sortOrder' => 10,
            'type' => 'group',
            'additionalClasses' => 'street',
            'children' => [
                [
                    'component' => 'Magento_Ui/js/form/element/abstract',
                    'config' => [
                        'customScope' => 'billingAddress',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input'
                    ],
                    'dataScope' => '0',
                    'provider' => 'checkoutProvider',
                    'validation' => ['required-entry validate-alphanum-with-spaces' => true, "min_text_length" => 5, "max_text_length" =>20],
                ],
                [
                    'component' => 'Magento_Ui/js/form/element/abstract',
                    'config' => [
                        'customScope' => 'shippingAddress',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input'
                    ],
                    'dataScope' => '1',
                    'provider' => 'checkoutProvider',
                    'validation' => ['required-entry validate-alphanum-with-spaces' => true, "min_text_length" => 5, "max_text_length" =>20],
                ]
            ]
        ];
                return $jsLayout;
    }

After added this code flush cache and refresh page but this code did not work for me. Anyone can help?

Thanks for support in advance.

Answer 1

try below steps

create a custom module then create the below files.

File:Vendor/Module/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="Custom_Checkout" type="Vendor\Module\Block\LayoutProcessor" sortOrder="100"/>
        </type>

</config>

Then create

File: Vendor/Module/Block/LayoutProcessor.php

<?php

namespace Vendor\Module\Block;


class LayoutProcessor {

    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
    \Magento\Checkout\Block\Checkout\LayoutProcessor $subject, array $jsLayout
    ) {
        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
                ['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [
            'component' => 'Magento_Ui/js/form/components/group',
            'label' => __('Street Address'),
            'required' => true,
            'dataScope' => 'shippingAddress.street',
            'provider' => 'checkoutProvider',
            'sortOrder' => 60,
            'type' => 'group',
            'children' => [
                    [
                    'component' => 'Magento_Ui/js/form/element/abstract',
                    'config' => [
                        'customScope' => 'shippingAddress',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input'
                    ],
                    'dataScope' => '0',
                    'provider' => 'checkoutProvider',
                    'validation' => ['required-entry' => true, 'validate-alphanum-with-spaces' => true, "min_text_len‌​gth" => 1, "max_text_length" => 40],
                ],
                    [
                    'component' => 'Magento_Ui/js/form/element/abstract',
                    'config' => [
                        'customScope' => 'shippingAddress',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input'
                    ],
                    'dataScope' => '1',
                    'provider' => 'checkoutProvider',
                    'validation' => ['required-entry' => false, 'validate-alphanum-with-spaces' => true, "min_text_len‌​gth" => 1, "max_text_length" => 40],
                ]
            ]
        ];
        return $jsLayout;
    }

}

Run CLI commands

 bin/magento setup:di:compile
 bin/magento setup:static-content:deploy
 bin/magento cache:clean
 bin/magento cache:flush

I hope this will help you...!