1

I want to add US phone number format without adding validation on form. Eg: if user enters 805839483 in form, It should display (805) 583-9483 on shipping addresses.

Can anybody help me?

2 Answers 2

5
+25

You can add following changes for US phone number format on Checkout Page.

  1. First, create checkout_index_index.xml file inside app\code\Vendor\Extension\view\frontend\layout\ folder and add this code:

     <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"     xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
         <body>
             <referenceContainer name="after.body.start">
                 <block class="Magento\Framework\View\Element\Template" before="-" template="Vendor_Extension::inputformat.phtml"/>
             </referenceContainer>
         </body>
     </page>
    

2.Then Add inputformat.phtml file inside app\code\Vendor\Extension\view\frontend\templates\ folder and add this code:

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"/></script>
<script>
    require([
        "jquery"
    ], function($) {
        setTimeout(
            function(){
                $('input[name$="telephone"]').inputmask({"mask": "+1(999) 999 99 99"});
            }, 6000);
    });
</script>
  • Please Find Out Attached screenshots

Checkout Page Address

  • Phone Number validation as per US Format on Edit Billing address

Phone Number Validation

  • Phone Number validation as per US Format on the Shipping address Shipping Address
0

You can accomplish this by using the Input Mask jQuery extension.

$('#phoneNumber').inputmask("(999) 999-9999");

use this js for that:- jquery.inputmask.bundle.js

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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