Magento 2:Checkout phone number field should accept numbers plus special character like (-)?

Question

In magento 2.1.X version checkout phone number should accept special character like (-) and should limit to 15 characters but currently it is accepting 10 characters only? I did searched the core but could able to restrict and accept the special characters.

Answer 1

In checkout_index_index.xml

<item name="validation" xsi:type="array">                                                                        
    <item name="min_text_length" xsi:type="number">10</item>                                                                         
    <item name="max_text_length_phone" xsi:type="number">15</item>                                                                        
    <item name="validate-number" xsi:type="number">0</item>                                                                    
</item>

and then in vendor/magento/module_ui/view/base/web/js/lib/validation/rules.js

"max_text_length_phone": [ 
        function (value, params) { 
            return !_.isUndefined(value) && value.length <= +params; 
        }, 
        $.mage.__('Phone number cannot exceed 15 characters.') 
    ], 

the above code is for validation text and for adding regex as we require, so in our case this (number with hypens allowed with max length of 15) For, that in Magento_Ui/web/js/lib/validation/rules.js

"validate-number": [
        function(value) {
            return utils.isEmptyNoTrim(value) || (!isNaN(utils.parseNumber(value)) && /^[0-9-\s]+$/.test(value));
        },
        $.mage.__('Please enter a valid number in this field.')
    ],

That's it, we've done it. hope this would helps somebody.

Answer 2

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.xml file.

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