Correct way to block checkout step progress due to invalid postcode

Question

I'm trying to switch the default shipping and billing address postcode validation, where instead of showing a warning if the postcode isn't valid for the selected country, it should show an error and crucially block progression to the next step. It's straightforward enough to switch from warn to error by extending e.g the vendor/magento/module-checkout/view/frontend/web/js/model/shipping-rates-validator.js through a mixin, however, what's less clear is the best way to block the progression to the next checkout step if the postcode validation isn't met.

I've seen some SO posts where this rule has been suggested, but it doesn't do what i'm looking for so I'm not sure if this is applicable to my use case:

<item name="validation" xsi:type="array">
      <item name="zip-range" xsi:type="string">true</item>
</item>

I've also been looking at the validateShippingInformation function in vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js but this seems like it would be quite a clunky approach if I have to override this function to explicitly try and block progression if the postcode isn't validated.

Grateful if anyone has any pointers on what the best approach is here.

Answer 1

You should adopt fool-proof two prong approach to solve this issue. You should add a client-side validation rule and a server side plugin to check and verify postcode.

Answer 2

As you already know, Magento's checkout does support adding new/custom validator, or you can modify existing ones by using mixin.

You can start by checking how the Next button works, or even go back to how the whole progress bar and steps are rendered

The brief answer is when you click Next, it will validate a form, if that form isn't validated, you cannot go to the Payment and Review page. You can add your own logic to disable or even not showing the Next button if you want