SwissUpLabs Logo

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.

  1. 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')
            }
        });
    });
    
  2. 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
    
Next up
Edit this Page