Magento 2 – Add Validation to ‘Street’ in Checkout Address Form

magento2validation

Tried to add the following code to add validation for street, but it's not work. How to add the validation for street? Thanks.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress"  xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="company" xsi:type="array">
                                                                    <item name="visible" xsi:type="boolean">false</item>
                                                                </item>
                                                                <item name="firstname" xsi:type="array">
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="validate-alpha" xsi:type="string">true</item>
                                                                    </item>
                                                                </item>
                                                                <item name="lastname" xsi:type="array">
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="validate-alpha" xsi:type="string">true</item>
                                                                    </item>
                                                                </item>
                                                                <item name="flat" xsi:type="array">
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="validate-alphanum-with-spaces" xsi:type="string">true</item>
                                                                    </item>
                                                                </item>
                                                                <item name="floor" xsi:type="array">
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="validate-alphanum-with-spaces" xsi:type="string">true</item>
                                                                    </item>
                                                                </item>
                                                                <item name="building" xsi:type="array">
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="validate-alphanum-with-spaces" xsi:type="string">true</item>
                                                                    </item>
                                                                </item>
                                                                <item name="street" xsi:type="array">
<!--                                                                    <item name="children" xsi:type="array">
                                                                        <item name="0" xsi:type="array">-->
                                                                            <item name="validation" xsi:type="array">
                                                                                <item name="validate-hk-address" xsi:type="string">true</item>
                                                                            </item>
<!--                                                                        </item>
                                                                        <item name="1" xsi:type="array">
                                                                            <item name="validation" xsi:type="array">
                                                                                <item name="validate-hk-address" xsi:type="string">true</item>
                                                                            </item>
                                                                        </item>
                                                                    </item>-->
                                                                </item>
                                                                <item name="city" xsi:type="array">
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="validate-hk-address" xsi:type="string">true</item>
                                                                    </item>
                                                                </item>
                                                                <item name="telephone" xsi:type="array">
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="validate-hk-phone-number" xsi:type="string">true</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments> 
        </referenceBlock>
    </body>
</page>

Best Answer

Firstly, Magento's validation for checkout_index_index.xml is not working properly so, you have to insert the rules while you replace the street fields.

You can do this by creating a plugin and insert the fields in Layout AfterProcessor.

`namespace/module/etc/frontend/di.xml`
...
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="rewrite-street" type="Namespace\Module\Model\Checkout\LayoutProcessorPlugin" sortOrder="10"/>
    </type>
...

And the LayoutProcessorPlugin should look like this:

namespace/module/Model/Checkout/LayoutProcessorPlugin

...

<?php

namespace Namespace\Module\Model\Checkout;

class LayoutProcessorPlugin
{
/**
 * @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',
        'additionalClasses' => 'street',
        '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, "min_text_len‌​gth" => 1, "max_text_length" => 255],
            ],
                [
                '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, "min_text_len‌​gth" => 1, "max_text_length" => 255],
            ]
        ]
    ];
    return $jsLayout;
    }
}

You can insert in validation array any validation rule you want.

Related Topic