SwissUpLabs Logo

Phone Fields mask

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

Firecheckout uses Text Mask library to create field masks.

Please read TextMask Docs for more information.

  1. Create custom.js file. custom.js
  2. Using a demo of Text Mask, choose the phone mask.
  3. According this an 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');
        });
    

    Result

    phone-masks

  4. Save the file and run following bash commands to deploy script:

        cd magento/root/folder
        rm -rf var/view_preprocessed pub/static/frontend
        bin/magento setup:static-content:deploy
    
  5. That’s all.
Next up
Edit this Page