By default Magento 2 has predefined validations for all checkout fields, like postal/zip code and phone. Changing them can easily be done through the xml checkout file. The same method can also be used to change or add tooltip on checkout fields.
As an example, suppose you want to change the zip code to allow only 5 digits and the telephone fields to only accept 10 digits. Also, both field will have a tooltip to let the customer know what to enter on them.
All the configuration is done by changing the checkout_index_index.xml file which can be placed/located inside your theme folder at <Theme_Vendor>/<Theme_Name>/Magento_Checkout/layout.
#File: <Theme_Vendor>/<Theme_Name>/Magento_Checkout/layout/checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<item name="postcode" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="min_text_length" xsi:type="number">5</item>
<item name="max_text_length" xsi:type="number">5</item>
<item name="validate-number" xsi:type="number">0</item>
</item>
<item name="config" xsi:type="array">
<item name="tooltip" xsi:type="array">
<item name="description" xsi:type="string" translate="true">Please enter 5 digits.</item>
</item>
</item>
</item>
<item name="telephone" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="min_text_length" xsi:type="number">10</item>
<item name="max_text_length" xsi:type="number">10</item>
<item name="validate-number" xsi:type="number">0</item>
</item>
<item name="config" xsi:type="array">
<item name="tooltip" xsi:type="array">
<item name="description" xsi:type="string" translate="true">Please enter 10 digits.</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Magento 2 checkout has a very long and complex structure that is laid out in the checkout_index_index.xml file (you can look at the default file located under vendor/magento/module-checkout/layout/checkout_index_index.xml). However, this provides a powerful, versatile, easy and fast way to customize a lot of aspects without having to change any templates.
The aspects referenced on this post are only a sample of what you can do just by changing the checkout xml layout file 🙂