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