Magento 2 How to add extra validation to check out address form?

Question

I want to add a validation to the address form in checkout step to ensure the address input is alphanumeric and ensure the input phone number is numeric. How to add the validation? Thanks

Answer 1

Magento is manage input fields validation using Html class and UI component.

From checkout_index_index.xml layout file, magento is manage checkout shipping address fields validation,here magento define class for your input fields.

So if we change class at here then it will working.

For example telephone field, If you want to add validation of numeric.

then you need add below code:

<item name="validation" xsi:type="array">
    <item name="YourClass" xsi:type="string">true</item>
</item>

So that may be like that:

<item name="telephone" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="tooltip" xsi:type="array">
            <item name="description" xsi:type="string" translate="true">For delivery questions.</item>
        </item>
    </item>
    <!-- add a validation code at here -->
    <item name="validation" xsi:type="array">
        <item name="validate-digits" xsi:type="string">true</item>
    </item>
    <!-- end of validation -->
</item>

But for billing address,you need add your validation from class Magento\Checkout\Block\Checkout\LayoutProcessor

   'telephone' => [
            /* Add by Amit Bera */
             'validation' => [
                    'mobileInD' => true,
                ],
             /* end by Amit Bera */   
                'config' => [
                /*
                    'tooltip' => [
                        'description' => 'For delivery questions.',
                    ],
                    */
                ],

You can find all validation class at Magento_Ui/web/js/lib/validation/rules.js For telephone no,you can add validate-digit

Answer 2

I'd suggest validating beyond alphanumeric input and check that customer addresses are valid and accurate for delivering your Magento orders. A nice way to do that is to help the user by auto filling the address based on what they type while they are at the data entry stage.

There are a number of Magento extensions which will do this job quite elegantly in the Magento Marketplace.

As an example, I am currently working on an extension for the Magento platform, that is designed to perform this task. The way it works is that, as soon as the customer starts typing an address, a list of relevant options are shown:

When the customer's address is shown in the list, they can then select it, and the form is automatically populated.

We have found that by using a service such as this, a customer can have their full address populated by only typing a small part. As a bonus, it's validated too!

I'm certainly not saying the service I'm working on is one you should use, just worth considering. There are plenty of options available to make this stage of the checkout process more user friendly for your customers.

DISCLAIMER: I work for PCA Predict, the people behind the 'Addressy' address verification service.