Magento 2: phone number validation (only accepts numbers)

Question

In Magento 2, I want to make phone fields number validation, (eg in the checkout page) only accepts numbers (and not characters)?

Answer 1

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>

Answer 2

form should be like

<form class="form contact"
  action="<?php /* @escapeNotVerified */ echo $block->getFormAction(); ?>"
  id="contact-form"
  method="post"
  data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"
  data-mage-init='{"validation":{}}'>

now in input field use data-validate="{'validate-number':true}"

Your input would look like

<input type="text" data-validate="{'validate-number':true}">

hope it helps.

Answer 3

You have to do add data-mage-init='{"validation":{}}' inside form declaration as following:

<form class="form contact"
      action="<?php /* @escapeNotVerified */ echo $block->getFormAction(); ?>"
      id="contact-form"
      method="post"
      data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"
      data-mage-init='{"validation":{}}'>

Use class validate-number

I hope it will help you.