How to add phone mask to checkout page in magento2?

I need to add a mask to telephone on a checkout page, like +9-(999)-999-99-99.

edited Apr 26 '18 at 15:50

lalit mohan

732527

asked Sep 6 '17 at 8:47

Abs

112

bumped to the homepage by Community♦ 14 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

magento.stackexchange.com/questions/95171/…

– lalit mohan
Apr 26 '18 at 13:47

add a comment |

I need to add a mask to telephone on a checkout page, like +9-(999)-999-99-99.

edited Apr 26 '18 at 15:50

lalit mohan

732527

asked Sep 6 '17 at 8:47

Abs

112

bumped to the homepage by Community♦ 14 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

magento.stackexchange.com/questions/95171/…

– lalit mohan
Apr 26 '18 at 13:47

add a comment |

I need to add a mask to telephone on a checkout page, like +9-(999)-999-99-99.

edited Apr 26 '18 at 15:50

lalit mohan

732527

asked Sep 6 '17 at 8:47

Abs

112

I need to add a mask to telephone on a checkout page, like +9-(999)-999-99-99.

magento2 onepage-checkout

edited Apr 26 '18 at 15:50

lalit mohan

732527

asked Sep 6 '17 at 8:47

Abs

112

edited Apr 26 '18 at 15:50

lalit mohan

732527

asked Sep 6 '17 at 8:47

Abs

112

edited Apr 26 '18 at 15:50

lalit mohan

732527

edited Apr 26 '18 at 15:50

lalit mohan

732527

edited Apr 26 '18 at 15:50

lalit mohan

732527

asked Sep 6 '17 at 8:47

Abs

112

asked Sep 6 '17 at 8:47

Abs

112

asked Sep 6 '17 at 8:47

Abs

112

bumped to the homepage by Community♦ 14 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

bumped to the homepage by Community♦ 14 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

magento.stackexchange.com/questions/95171/…

– lalit mohan
Apr 26 '18 at 13:47

add a comment |

magento.stackexchange.com/questions/95171/…

– lalit mohan
Apr 26 '18 at 13:47

magento.stackexchange.com/questions/95171/…

– lalit mohan
Apr 26 '18 at 13:47

add a comment |

3 Answers
3

active

oldest

votes

If by mask you mean format it like that

so change 99999999999 to +9-(999)-999-99-99

then you could write a simple php format function something like:

$data = '+11234567890';



if(  preg_match( '/^+d(d{3})(d{3})(d{4})$/', $data,  $matches ) )

{

    $result = $matches[1] . '-' .$matches[2] . '-' . $matches[3];

    return $result;

}

and then change the pattern to your liking

answered Apr 26 '18 at 14:33

Pascal Wientjes

414411

add a comment |

Why don't you take a look at at this jQuery Mask plugin? Include the script in the head of your website and then call the following below the input field:

$('#billing:telephone').mask('+0-(000)-000-00-00');

answered Apr 26 '18 at 15:01

Liam McArthur

77421236

add a comment |

Hope it help you..
http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_zip.html

Please edit in these file in your module

Add the following in vendormagentomodule-checkoutviewfrontendlayoutcheckout_index_index.xml

example: magento2root/app/code/VendorName/ModuleName/view/frontend/layout/checkout_index_index.xml

<item name="telephone" xsi:type="array">

  <item name="validation" xsi:type="array">

     <item name="customValidate" xsi:type="string">true</item>

  </item>

</item>

Add custom validation as per your need in

vendormagentomagento2-baselibwebmagevalidation.js

"customValidate": [

    function (phone_number, element) {

        return this.optional(element) || phone_number.length > 9 &&

        phone_number.match(/([+]?d{1,2}[.-s]?)?(d{3}[.-]?){2}d{4}/g) &&

        phone_number.match(/^[-+]?[0-9]+$/);

    },

        'Please specify a valid mobile number with country code example +9-(999)-999-99-99'

  ],

Add following in

vendormagentomodule-uiviewbasewebjslibvalidationrules.js

"customValidate": [

            function(value) {

                return value.length > 9 && value.match(/([+]?d{1,2}[.-s]?)?(d{3}[.-]?){2}d{4}/g) && value.match(/^[-+]?[0-9]+$/);

            },

            $.mage.__('Please specify a valid mobile number')

        ],

edited Apr 26 '18 at 15:16

answered Apr 26 '18 at 15:01

lalit mohan

732527

add a comment |

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f192152%2fhow-to-add-phone-mask-to-checkout-page-in-magento2%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

If by mask you mean format it like that

so change 99999999999 to +9-(999)-999-99-99

then you could write a simple php format function something like:

$data = '+11234567890';



if(  preg_match( '/^+d(d{3})(d{3})(d{4})$/', $data,  $matches ) )

{

    $result = $matches[1] . '-' .$matches[2] . '-' . $matches[3];

    return $result;

}

and then change the pattern to your liking

answered Apr 26 '18 at 14:33

Pascal Wientjes

414411

add a comment |

If by mask you mean format it like that

so change 99999999999 to +9-(999)-999-99-99

then you could write a simple php format function something like:

$data = '+11234567890';



if(  preg_match( '/^+d(d{3})(d{3})(d{4})$/', $data,  $matches ) )

{

    $result = $matches[1] . '-' .$matches[2] . '-' . $matches[3];

    return $result;

}

and then change the pattern to your liking

answered Apr 26 '18 at 14:33

Pascal Wientjes

414411

add a comment |

If by mask you mean format it like that

so change 99999999999 to +9-(999)-999-99-99

then you could write a simple php format function something like:

$data = '+11234567890';



if(  preg_match( '/^+d(d{3})(d{3})(d{4})$/', $data,  $matches ) )

{

    $result = $matches[1] . '-' .$matches[2] . '-' . $matches[3];

    return $result;

}

and then change the pattern to your liking

answered Apr 26 '18 at 14:33

Pascal Wientjes

414411

If by mask you mean format it like that

so change 99999999999 to +9-(999)-999-99-99

then you could write a simple php format function something like:

$data = '+11234567890';



if(  preg_match( '/^+d(d{3})(d{3})(d{4})$/', $data,  $matches ) )

{

    $result = $matches[1] . '-' .$matches[2] . '-' . $matches[3];

    return $result;

}

and then change the pattern to your liking

answered Apr 26 '18 at 14:33

Pascal Wientjes

414411

answered Apr 26 '18 at 14:33

Pascal Wientjes

414411

answered Apr 26 '18 at 14:33

Pascal Wientjes

414411

answered Apr 26 '18 at 14:33

Pascal Wientjes

414411

add a comment |

Why don't you take a look at at this jQuery Mask plugin? Include the script in the head of your website and then call the following below the input field:

$('#billing:telephone').mask('+0-(000)-000-00-00');

answered Apr 26 '18 at 15:01

Liam McArthur

77421236

add a comment |

Why don't you take a look at at this jQuery Mask plugin? Include the script in the head of your website and then call the following below the input field:

$('#billing:telephone').mask('+0-(000)-000-00-00');

answered Apr 26 '18 at 15:01

Liam McArthur

77421236

add a comment |

Why don't you take a look at at this jQuery Mask plugin? Include the script in the head of your website and then call the following below the input field:

$('#billing:telephone').mask('+0-(000)-000-00-00');

answered Apr 26 '18 at 15:01

Liam McArthur

77421236

Why don't you take a look at at this jQuery Mask plugin? Include the script in the head of your website and then call the following below the input field:

$('#billing:telephone').mask('+0-(000)-000-00-00');

answered Apr 26 '18 at 15:01

Liam McArthur

77421236

answered Apr 26 '18 at 15:01

Liam McArthur

77421236

answered Apr 26 '18 at 15:01

Liam McArthur

77421236

answered Apr 26 '18 at 15:01

Liam McArthur

77421236

add a comment |

Hope it help you..
http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_zip.html

Please edit in these file in your module

Add the following in vendormagentomodule-checkoutviewfrontendlayoutcheckout_index_index.xml

example: magento2root/app/code/VendorName/ModuleName/view/frontend/layout/checkout_index_index.xml

<item name="telephone" xsi:type="array">

  <item name="validation" xsi:type="array">

     <item name="customValidate" xsi:type="string">true</item>

  </item>

</item>

Add custom validation as per your need in

vendormagentomagento2-baselibwebmagevalidation.js

"customValidate": [

    function (phone_number, element) {

        return this.optional(element) || phone_number.length > 9 &&

        phone_number.match(/([+]?d{1,2}[.-s]?)?(d{3}[.-]?){2}d{4}/g) &&

        phone_number.match(/^[-+]?[0-9]+$/);

    },

        'Please specify a valid mobile number with country code example +9-(999)-999-99-99'

  ],

Add following in

vendormagentomodule-uiviewbasewebjslibvalidationrules.js

"customValidate": [

            function(value) {

                return value.length > 9 && value.match(/([+]?d{1,2}[.-s]?)?(d{3}[.-]?){2}d{4}/g) && value.match(/^[-+]?[0-9]+$/);

            },

            $.mage.__('Please specify a valid mobile number')

        ],

edited Apr 26 '18 at 15:16

answered Apr 26 '18 at 15:01

lalit mohan

732527

add a comment |

Hope it help you..
http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_zip.html

Please edit in these file in your module

Add the following in vendormagentomodule-checkoutviewfrontendlayoutcheckout_index_index.xml

example: magento2root/app/code/VendorName/ModuleName/view/frontend/layout/checkout_index_index.xml

<item name="telephone" xsi:type="array">

  <item name="validation" xsi:type="array">

     <item name="customValidate" xsi:type="string">true</item>

  </item>

</item>

Add custom validation as per your need in

vendormagentomagento2-baselibwebmagevalidation.js

"customValidate": [

    function (phone_number, element) {

        return this.optional(element) || phone_number.length > 9 &&

        phone_number.match(/([+]?d{1,2}[.-s]?)?(d{3}[.-]?){2}d{4}/g) &&

        phone_number.match(/^[-+]?[0-9]+$/);

    },

        'Please specify a valid mobile number with country code example +9-(999)-999-99-99'

  ],

Add following in

vendormagentomodule-uiviewbasewebjslibvalidationrules.js

"customValidate": [

            function(value) {

                return value.length > 9 && value.match(/([+]?d{1,2}[.-s]?)?(d{3}[.-]?){2}d{4}/g) && value.match(/^[-+]?[0-9]+$/);

            },

            $.mage.__('Please specify a valid mobile number')

        ],

edited Apr 26 '18 at 15:16

answered Apr 26 '18 at 15:01

lalit mohan

732527

add a comment |

Hope it help you..
http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_zip.html

Please edit in these file in your module

Add the following in vendormagentomodule-checkoutviewfrontendlayoutcheckout_index_index.xml

example: magento2root/app/code/VendorName/ModuleName/view/frontend/layout/checkout_index_index.xml

<item name="telephone" xsi:type="array">

  <item name="validation" xsi:type="array">

     <item name="customValidate" xsi:type="string">true</item>

  </item>

</item>

Add custom validation as per your need in

vendormagentomagento2-baselibwebmagevalidation.js

"customValidate": [

    function (phone_number, element) {

        return this.optional(element) || phone_number.length > 9 &&

        phone_number.match(/([+]?d{1,2}[.-s]?)?(d{3}[.-]?){2}d{4}/g) &&

        phone_number.match(/^[-+]?[0-9]+$/);

    },

        'Please specify a valid mobile number with country code example +9-(999)-999-99-99'

  ],

Add following in

vendormagentomodule-uiviewbasewebjslibvalidationrules.js

"customValidate": [

            function(value) {

                return value.length > 9 && value.match(/([+]?d{1,2}[.-s]?)?(d{3}[.-]?){2}d{4}/g) && value.match(/^[-+]?[0-9]+$/);

            },

            $.mage.__('Please specify a valid mobile number')

        ],

edited Apr 26 '18 at 15:16

answered Apr 26 '18 at 15:01

lalit mohan

732527

Hope it help you..
http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_zip.html

Please edit in these file in your module

Add the following in vendormagentomodule-checkoutviewfrontendlayoutcheckout_index_index.xml

example: magento2root/app/code/VendorName/ModuleName/view/frontend/layout/checkout_index_index.xml

<item name="telephone" xsi:type="array">

  <item name="validation" xsi:type="array">

     <item name="customValidate" xsi:type="string">true</item>

  </item>

</item>

Add custom validation as per your need in

vendormagentomagento2-baselibwebmagevalidation.js

"customValidate": [

    function (phone_number, element) {

        return this.optional(element) || phone_number.length > 9 &&

        phone_number.match(/([+]?d{1,2}[.-s]?)?(d{3}[.-]?){2}d{4}/g) &&

        phone_number.match(/^[-+]?[0-9]+$/);

    },

        'Please specify a valid mobile number with country code example +9-(999)-999-99-99'

  ],

Add following in

vendormagentomodule-uiviewbasewebjslibvalidationrules.js

"customValidate": [

            function(value) {

                return value.length > 9 && value.match(/([+]?d{1,2}[.-s]?)?(d{3}[.-]?){2}d{4}/g) && value.match(/^[-+]?[0-9]+$/);

            },

            $.mage.__('Please specify a valid mobile number')

        ],

edited Apr 26 '18 at 15:16

answered Apr 26 '18 at 15:01

lalit mohan

732527

edited Apr 26 '18 at 15:16

answered Apr 26 '18 at 15:01

lalit mohan

732527

answered Apr 26 '18 at 15:01

lalit mohan

732527

answered Apr 26 '18 at 15:01

lalit mohan

732527

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Magento Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Kdjykuj