Validation for zip code field on checkout page in magento 2

Question

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?

Answer 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:Theme\Theme\Magento_Ui\web\js\lib\validation\rules.js >

Answer 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

Answer 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.