1

I am absolutely new with Magento. Have basic knowledge with custom modules and front-end layout updates.

I need to insert a custom validation for the ZIP Code in my checkout page (One-page checkout). Zip codes are from database, there is a custom admin module for the business administrator who can put insert/update ZIP codes with it's respective Country Code (Both are separate fields).

I have tried to customize "/view/frontend/layout/checkout_index_index.xml" with no luck. Most of the examples are with JS solution. Some of them with event observer and custom modules but not clear enough. Unable to figure it out how to validate the data with the inserted "ZIP Code" and selected Country.

Any support or proper direction will much appreciated.

0

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 vendor][Theme name]\Magento_Ui\web\js\lib\validation\rules.js>

Thanks

| improve this answer | |
  • Hi @mayur , Thanks a lot. I have tried your given code. I am trying to add a new rule in "rules.js" that basically copied from "validate-zip-us" for now. But unable to make it extended with primary rule set. Means, it is working but all the other primary validation rules are not functional any more. I think that .mapObject is actually override the existing rules here. Also tried with $.validator.addRule** and **$.validator.addMethod but no luck. No validation works in that scenario. Not sure how to share/show my codes here. Thanks for your time and patience. – Anjan Patra Dec 3 '19 at 12:53

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.