Postcode mask & validator

This feature supported since v.1.10.0

In this tutorial we will create dynamic field mask, that will change the mask on the fly, depending on client’s input.

Create custom.js file in your active theme with following content:

define([
    'Swissup_Firecheckout/js/utils/form-field/mask',
    'Swissup_Firecheckout/js/utils/form-field/validator',
    'Magento_Checkout/js/model/quote',
    'mage/translate'
], function (mask, validator, quote, $t) {
    'use strict';

    mask('.form-shipping-address [name="postcode"]', {
        guide: true,
        mask: function (raw) {
            // 5 digits by default ('90064' for example)
            var pattern = [/\d/, /\d/, /\d/, /\d/, /\d/];

            // Use Canadian postal code if first symbol is alphabetical
            if (/^[a-zA-Z]/.test(raw)) {
                pattern = [/[A-Z]/i, /\d/, /[A-Z]/i, ' ', /\d/, /[A-Z]/i, /\d/];
            }

            // Use Dutch format when it's selected in address
            if (quote.shippingAddress && quote.shippingAddress().countryId === 'NL') {
                pattern = [/\d/, /\d/, /\d/, /\d/, /[A-Z]/i, /[A-Z]/i];
            }

            return pattern;
        },
        pipe: function (conformedValue) {
            return conformedValue.toUpperCase();
        }
    });
    validator('[name="postcode"]', {
        'lazy': true,
        'fc-custom-rule-postcode': {
            handler: function (value) {
                return new RegExp(/^(\d{5}|[A-Z]\d[A-Z] ?\d[A-Z]\d)$/).test(value);
            },
            message: $t('Invalid postcode')
        }
    });
});

Run “Deploy static content” command:

cd <magento_root>

# remove previously deployed firecheckout files
find pub/static -type d -regex ".*Firecheckout.*js" -exec rm -rf {} \;

# run deployment command
bin/magento setup:static-content:deploy

Postcode mask & validator

Next up