by Firecheckout Support

How to create field masks for Magento 2 checkout fields?

This article helps you to set the right mask for the fields: telephone, fax.

Note:Firecheckout uses Text Mask library to create field masks. Please read TextMask Docs for more information.

Let's start. Please do the steps:

  • Create a custom.js file.
  • Using a demo of Text Mask, choose the phone mask.
  • According to this example, set the masks.
define([
    'jquery',
    'underscore',
    'Swissup_Firecheckout/js/utils/form-field/mask',
    'Swissup_Firecheckout/js/utils/form-field/placeholder'
    ], function ($, _, mask, placeholder) {
        'use strict';

        var scopes = [
            '.form-shipping-address',  //define address form in which need to set the phone-mask
            '.form-billing-address'
        ];

        _.each(scopes, function (scope) {
            mask('[name="telephone"]',{
                guide: false,
                mask: function (raw) {
                    var mask =['(',/\d/, /\d/,')',/\d/,/\d/,/\d/,/\d/,/\d/,'-',/\d/,/\d/,/\d/,/\d/];

                    if (raw.length == 13) {
                        mask = ['(',/\d/, /\d/,')',/\d/,/\d/,/\d/,/\d/,'-',/\d/,/\d/,/\d/,/\d/];
                    }

                    return mask;
                }

            });

            mask('[name="fax"]',{
                guide: false,
                mask: function (raw) {
                    var mask =[/\d/, /\d/,'-',/\d/,/\d/,/\d/,'-',/\d/,/\d/,/\d/,/\d/];
                    return mask;
                }
            });
        });
        // you can show the mask of a field in the placeholder
        placeholder('[name="fax"]','00-000-0000');
    });
  • See the result.
  • magento 2 checkout field mask

  • Save the file and run the following bash commands to deploy the script:
cd magento/root/folder
  rm -rf var/view_preprocessed pub/static/frontend
  bin/magento setup:static-content:deploy

Recent articles

up