Skip to content

How to add custom validation to postcode field in shipping address on the checkout?

I have been trying to add custom validation to the postcode field in shipping address form in the checkout.

I’ve created a validation mixin

var config = {
    config: {
        mixins: {
            'mage/validation': {
                'Vendor_Checkout/js/validation-mixin': true
            }
        }
    }
};

and the JS file

define([
    'jquery'
], function ($) {
    "use strict";
console.log('mixin called');
    return function (target) {
        $.validator.addMethod(
            'validate-postcode',
            function (value, element) {
                console.log(value, element)
                return /^[0-9]{4}s?([A-Z]{2}|[a-z]{2})$/.test(value);
            },
            $.mage.__('Postcode invalid. Please enter a valid postcode.')
        );
        return target;
    }
});

And then I add the custom validation to the postcode field

$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['postcode']['validation']['validate-postcode'] = true;

The mixin is being called correctly as I can confirm this from the first console.log. In the PHP code, I’m targeting the correct postcode field, as applying the default [‘validate-number’] validation does work as expected.

However, the custom validation does not work, and I cant figure why