Magento2 Validation – Implement Zip Code Validation

You should be able to change the class from "validate-zip-international" to "validate-number" to add Magento's frontend JS validation for numbers, or "validate-digits".

Source: /js/prototype/validation.js for a list of all validation classes (addAllThese method)

['validate-number', 'Please enter a valid number in this field.', function(v) {
    return Validation.get('IsEmpty').test(v) || (!isNaN(parseNumber(v)) && !/^\s+$/.test(parseNumber(v)));
}],
['validate-digits', 'Please use numbers only in this field. Please avoid spaces or other characters such as dots or commas.', function(v) {
     return Validation.get('IsEmpty').test(v) ||  !/[^\d]/.test(v);
}]

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 >