I am trying to give US format phone number validation in onepage checkout page This is the layout checkout_index_index.xml that i created in my custom module. I know how to make i work by editing the core module (which is a strict no no when it comes to magento), Can anyone tell me what i am doing wrong .

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
                <argument name="jsLayout" xsi:type="array">
                    <!-- Your customization will be here -->
                    <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="telephone" xsi:type="array">
                                                                    <!--Validation for US phone number format-->
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="phoneUS" xsi:type="string">true</item>
                                                                    <item name="config" xsi:type="array">
                                                                        <item name="tooltip" xsi:type="array">
                                                                                <item name="description" xsi:type="string" translate="true">For delivery questions.</item>

I tried doing this by copying the entire checkout_index_index.xml page into my custom module ,which worked partially, because when i did that the shipping price disappeared.

i found this magento doc but didnt fully understand it.

Any help would be appretiated

  • Have you tried to just change the description translate attribute like For delivery questions. 123 to be sure that your rewrite is working? Are you also cleaning your cache? Mar 1, 2017 at 11:44
  • Yes i tried editing the description to see if it was working. And ofcource cleared the cache. Didn't work
    – HKR
    Mar 8, 2017 at 11:44
  • Can you show the path were you are copying checkout_index_index.xml please? Mar 8, 2017 at 23:24
  • app/code/myname/checkout/view/frontend/layout/checkout_index_index.xml
    – HKR
    Mar 17, 2017 at 6:12

1 Answer 1


Vendor/Module/registration.php & put below code.



add the module.xml file in Vendor/Module/etc/module.xml & put below code.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
   <module name="Vendor_Module" setup_version="1.0.0"></module>

Create di.xml file in Vendor/Module/etc/di.xml & put below code.

<?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="validate_telephone_checkout_layoutprocessor" type="Vendor\Module\Plugin\LayoutProcessor" sortOrder="100"/>

Now, create LayoutProcessor.php in Vendor\Module\Plugin\LayoutProcessor & put below code

namespace Vendor\Module\Plugin;

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
    ) {
        if (isset($jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
        )) {

            ['telephone']['validation'] = ['required-entry' => true, "validate-number"=>true, "min_text_length" =>10, "max_text_length" =>  10 ];

         /* config: checkout/options/display_billing_address_on = payment_method */
        if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
        )) {
            foreach ($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                     ['payment']['children']['payments-list']['children'] as $key => $payment) {
                    /* telephone */
                    ['telephone']['validation'] = ['required-entry' => true,"validate-number"=>true, "min_text_length" =>10, "max_text_length" =>  10 ];

        return $jsLayout;

This will validate phone number on checkout

  • 1
    how can I test phone to match custom regex?
    – CodeGenius
    Aug 29, 2019 at 8:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.