1

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">
    <body>
        <referenceBlockname="checkout.root">
            <arguments>
                <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>
                                                                    <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>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

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? – Jonathan Ribas Mar 1 '17 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 '17 at 11:44
  • Can you show the path were you are copying checkout_index_index.xml please? – Jonathan Ribas Mar 8 '17 at 23:24
  • app/code/myname/checkout/view/frontend/layout/checkout_index_index.xml – HKR Mar 17 '17 at 6:12
3

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

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_Module',
    __DIR__
);

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>
</config>

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"/>
    </type> 
</config>

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

<?php
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']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']
        )) {

            $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']
            ['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']
            ['payment']['children']['payments-list']['children']
        )) {
            foreach ($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                     ['payment']['children']['payments-list']['children'] as $key => $payment) {
                    /* telephone */
                    $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                    ['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
                    ['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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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