7

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:enter image description here 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?

7

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 >

3
  • I tried to override the checkout_index_index.xml in my theme, but no effect. Where exactly do I need to but those lines? Also is it possible to extend the layout rather than override the whole file? Currently it's quite crazy that Luma accepts all kinds of texts to the zip field and if the tax zone and rate for that extra zip text is not set, the tax will be 0%.
    – Webninja
    Aug 16 '17 at 18:31
  • Please check the updated answer Aug 16 '17 at 20:30
  • i am using magento 2.3.2 i am using this code but when i use this code or add any extra validation for post code in this way it working but in next step shipping rate working wrong.and no payment method is showing. Jan 15 '20 at 11:15
0

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

-1

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.

enter image description here

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.