Validation for zip code field on checkout page in magento 2

I try to apply validation for postal code on checkout like 4 numbers and 2 characters(A-Z) ex: “9999AA”.

Now, by default, if I press an invalid postal code on checkout page, I receive a message likes the screen-shot below: But even If I don’t change the postal code, I press next and finish my order.
Does anyone know how to solve this problem?
I found this link for javascript validation in magento 2 magento2 validator but I don’t know where I can apply this validation validate-zip-international and then to modify this validation rule base on my format.
Or is there another way to create a validation rule on zip code?

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

To add validation on the zip field we should overwirte Magento_Checkout/layout/checkout_index_index.xml and add this code :

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

Like this

<item name="postcode" xsi:type="array">
    <item name="sortOrder" xsi:type="string">75</item>
        <!-- post-code field has custom UI component -->
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/post-code</item>
    <item name="validation" xsi:type="array">
      <item name="required-entry" xsi:type="string">true</item>
      <item name="validate-zip-us" xsi:type="string">true</item>
    </item>
</item>

zip-range for example is a already defined rule in rules.js.

We can overwrite this rule or we can create another rule according to our needs in this location:ThemeThemeMagento_Uiwebjslibvalidationrules.js >

Method 2

I don’t think that overwriting rules.js is the answer to this. It does the job but it feels very dirty.

Putting something in the theme folder makes our extension highly depended of that file.

While there we could argue this. I’m offering a more decoupled and independent solution to validating UI Component generated forms.

My answer can be found here: Validating form elements built via ui-components

If you also want to disable the warning message shown you can check my answer here: How to disable Zip/Postal Code validation Notice Magento 2

Method 3

I think this is the simplest way to achieve this, no code edit required:

Store > Attributes > Customer Address

Then select your zip code field, and on the field configuration, you can define input validation as Numeric only and then min and max length.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0