Numeric Only Validation of Zip/Postal code is taking a space.

[varshanema519b]

Hello,
I have validated zip code field in customer address as a Numeric Only.
configure : Store->Attributes -> Customer Address ->Postcode ->Input Validation -Numeric Only.
But This field is taking  single space (not showing validation message) with numbers.
For 2 continuous spaces the validation message is showing.

[Bhanu Periwal · Accepted solution]

Hello @varshanema519b 

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

<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

It may help you!

Thank you

[varshanema519b]

Thank you.
It is working.

[varshanema519b]

Hello,
This is working only checkout page. But I need this validation on subscribe pro extension module in customer account for change shipping address's feild.

There is app/design/frontend/Themet/Swarming_SubscribePro/layout/swarming_subscribepro_customer_subscriptions.xml

and available code is

<item name="shippingAddressOptions" xsi:type="array">
<item name="component" xsi:type="string">Swarming_SubscribePro/js/view/subscription/shipping-info</item>
<item name="displayArea" xsi:type="string">shipping-info</item>
<item name="provider" xsi:type="string">spAddressProvider</item>
<item name="sortOrder" xsi:type="string">1</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Swarming_SubscribePro/subscription/shipping-info</item>
<item name="modalOptions" xsi:type="array">
<item name="type" xsi:type="string">popup</item>
<item name="title" xsi:type="string">Change shipping address</item>
<item name="responsive" xsi:type="boolean">true</item>
<item name="clickableOverlay" xsi:type="boolean">true</item>
</item>
<item name="deps" xsi:type="array">
<item name="0" xsi:type="string">spAddressProvider</item>
</item>
</item>
<item name="children" xsi:type="array">
<item name="shipping-address-fieldset" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="config" xsi:type="array">
<item name="deps" xsi:type="array">
<item name="0" xsi:type="string">spAddressProvider</item>
</item>
</item>
<item name="displayArea" xsi:type="string">additional-fieldsets</item>
</item>
<item name="messages" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/view/messages</item>
<item name="displayArea" xsi:type="string">messages</item>
</item>
</item>
</item>

Can u please suggest me , where can I add the code for validation ?