Cart Shipping Estimate, adds custom validation to zipcode

Question

How can I add a custom js validation in my cart estimation page? The default magento 2 behavior is that, on any change in my zipcode field, the estimation action starts and a spinner is showed, even when my zipcode isn't completed or is invalid. So, how can I adds a custom validation to my country zipcode code and trigger the estimation action only when the zip is valid?

PS: I have a custom shipping module, with the shipping-rates-validation-rules.js and shipping-rates-validator.js. I've tried to add mix-ins validations, to create my custom zip validation, but without success, the spinner still appearing.

Thanks in advance!

Answer 1

I have looked into your issue. My answer enables you to take over the magento postcode validation: this way, you may for instance only trigger any validation work if the postcode length is greater than 5, the spinner may remain but this may move you in the right direction.

I have setup a js rewrite of the Magento postcode validation file, see below

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/model/postcode-validator': 'Mbs_ShippingEstimation/js/takeoverpostcode'
        }
    }
}

then my js file is like below:

define([
    'mageUtils'
], function (utils) {
    'use strict';

    return {
        validatedPostCodeExample: [],

        /**
         * @param {*} postCode
         * @param {*} countryId
         * @return {Boolean}
         */
        validate: function (postCode, countryId) {
            if (!utils.isEmpty(postCode)) {
                var result = true;

                if (postCode == 'BH67 78O') {
                    return false;
                }

                return result;
            }

            return true;
        }
    };
});

with this in place (I have full code if you need), your validation can be customised at will (in the above code, you will see all postcodes are valid apart one that is hard-coded). Of course, you can also add your poscode validation library as dependency and work with it within this file too.

Good luck

Answer 2

I did it works at this way, but I don't know if it is the right magento way to do... but works.

In my custom shipping module, I've this shipping-rates-validation-rule.js:

define(
    [],
    function () {
        'use strict';

        return {
            getRules: function () {
                return {
                    'postcode': {
                        'required': true,
                        // here I set a new validation rule
                        'validate_zip_br': true
                    }
                };
            }
        };
    }
);

And my shipping-rates-validator.js:

define(
    [
        'jquery',
        'mageUtils',
        'Vendor_Module/js/model/shipping-rates-validation-rules',
        'mage/translate'
    ],
    function ($, utils, validationRules, $t) {
        'use strict';

        return {
            validationErrors: [],
            validate: function (address) {
                var self = this;
                this.validationErrors = [];
                $.each(validationRules.getRules(), function (field, rule) {
                    if (rule.required && utils.isEmpty(address[field])) {
                        var message = $t('Field ') + field + $t(' is required.');

                        self.validationErrors.push(message);

                    /*### AND HERE ###*/
                    // here I directly trate the rule setted before
                    } else if (rule.validate_zip_br) {
                        var zip = address[field];
                        zip = zip.replace(/-|_/g,'');
                        if(zip.length != 8) {
                            var message = $t('Field ') + field + $t(' has min-length of 8.');
                            self.validationErrors.push(message);
                        }
                    }
                });
                return !Boolean(this.validationErrors.length);
            }
        };
    }
);

So, as you can see, I've directly coded the validation on my validator file, I've tried to use mix-ins to create a new validation rule, but it does not work, however with the above code I've reached my expected behavior..