Magento2: How to customize the Billing address form?

Question

Currently there is no validation class available in phone number field.

enter image description here

I want to add "validate-digits" class, but I am not able to find the related file, Please help me how to do this changes so phone number only accept number only.

Thanks in advance

Answer 1

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;
 }
} 

• Purushotam Sharma: You are rock, it working as expected
• Ronak Rathod: accept answer if answer is worked
• Purushotam Sharma: I already accepted
• Purushotam Sharma: Can you please look into this as I am not able to override model