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?
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?
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.
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>
<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
We can overwrite this rule or we can create another rule according to our needs in this location:
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
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