How to Add Custom Validation to Address Field in Checkout in Magento 2

Hello, folks

I hope you are all doing great. I am back with another great article on how you can add custom validation to the address field of the checkout page in Magento 2.

Sometimes you want to have an extension or a code that can be integrated with your Magento 2 store that can add the custom validation to address field of the checkout page. So, the user will only be allowed to proceed once all the custom validation rules are satisfied.

The good news is that you can do that with the help of your coding knowledge. And even if you don’t know anything about coding, you can just Contact our Magento 2 Certified Developers.

Below are the steps and codes you need to follow and apply in your Magento 2 store to add custom validation to the address field in the checkout.

1. Create a file at a given Path,

app\code\Vendor\Extension\etc\frontend\di.xml

Once the file is created then use the below code to create the custom validation,

<?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-validation-street-address" type="Vendor\Extension\Model\Checkout\Layoutprocessorplugin"/>
   </type>
</config>

Follow the above step for every vendor if your store supports multivendor functionality.

2. Create another file at a given path,

app\code\Vendor\Extension\Model\Checkout\Layoutprocessorplugin.php

Once the file is created then use the below code to apply the custom validation,

<?php
namespace Vendor\Extension\Model\Checkout;
class Layoutprocessorplugin
{
    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'),
            '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" => 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 validate-alphanum-with-spaces' => true, "min_text_length" => 5, "max_text_length" => 255],
                ]
            ]
        ];
        return $jsLayout;
    }
}

Once the code is applied, clear the cache and refresh it. The custom validation will now start to work. So today, we learned that how you can add custom validation to address field in checkout for Magento 2 Platform. Using the codes described here, you will be able to set the custom validation to address field in the checkout. Also, install Custom Checkout Fields which helps the store admin customize the checkout page by adding extra fields. If anything goes wrong or you don’t know anything about coding for Magento, then you can always contact our Magento certified team of expert developers. Just visit our support page or hire a developer for your store.

Lastly, if you found this helpful, then give it a thumbs-up and share it with your Magento friends and colleagues. Do let us know if you had any problem while implementing the code by commenting below.

Happy coding! ?