To validate number you can use validate-number in your module checkout_index_index.xml file.
Like ::
<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>
<item name="validation" xsi:type="array">
<item name="min_text_length" xsi:type="number">10</item>
<item name="max_text_length" xsi:type="number">10</item>
<item name="validate-number" xsi:type="number">0</item>
</item>
</item>
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
Best Answer
Magento 2 out of the box support special character like dash(-) and allow more than 10 character. Please check below link and image.
Magento 2 demo link: http://magento2-demo.nexcess.net
To validate number you can use validate-number in your module
checkout_index_index.xmlfile.