How To Set Character Limit For Customer First Name & Last Name On Checkout Page In Magento 2

Hello Everyone,

In this blog, we will learn about how to Set Character Limits for Customer First Name and Last name on the Checkout Shipping Page in Magento 2.

By default Magento 2 checkout settings have no restriction on input character for first name and last name.

By implementing character limit merchants can ensure a more consistent way. 

Without wasting your time, let us guide you straight away. Follow the easy step given below to Set Character Limit for Customer First Name and Last Name on Checkout Page in Magento 2.

STEPS FOR SET CHARACTER LIMIT FOR CUSTOMER FIRST NAME AND LAST NAME ON CHECKOUT PAGE IN MAGENTO 2

Step 1: Create file checkout_index_index.xml

app/code/Vendor/Extension/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" 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="firstname" xsi:type="array">

                                                                    <item name="validation" xsi:type="array">

                                                                    <!-- set the length of the  first name characters.-->

                                                                        <item name="min_text_length" xsi:type="number">3</item>

                                                                        <item name="max_text_length" xsi:type="number">10</item>

                                                                        <item name="required-entry" xsi:type="boolean">true</item>

                                                                        <item name="max-words" xsi:type="number">4</item>

                                                                    </item>

                                                                </item>

                                                                <item name="lastname" xsi:type="array">

                                                                    <item name="validation" xsi:type="array">

                                                                <!-- set the length of the  last name characters.-->

                                                                        <item name="min_text_length" xsi:type="number">3</item>

                                                                        <item name="max_text_length" xsi:type="number">10</item>

                                                                        <item name="required-entry" xsi:type="boolean">true</item>

                                                                        <item name="max-words" xsi:type="number">4</item>

                                                                    </item>

                                                                </item>

                                                            </item>

                                                        </item>

                                                    </item>

                                                </item>

                                            </item>

                                        </item>

                                    </item>

                                </item>

                            </item>

                        </item>

                    </item>

                </argument>

            </arguments>

        </referenceBlock>

    </body>

</page>

Step 2: Finally run the below commands

$ php bin/magento setup:upgrade

$ php bin/magento cache:clean

$ php bin/magento cache:flush

Step 3: Output:

Final Thoughts:

So this was the easiest way which we have told you in this blog. This is how you can set the Character Limit for First Name and Last Name on the Checkout Page in Magento 2. Hope you liked the blog.

So quickly go to the comment box and tell me how you like this blog?

Stay tuned with us on our site to get new updates of Magento.

Thanks for reading and visiting our site.

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

Leave a Reply

Your email address will not be published. Required fields are marked *