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