I need to add a mask to postcode input (ex: 99.999-99), so I have Vendor/Theme/Magento_Checkout/web/template/form/element/zipcode.html with:

<input class="input-text col s12 zipcode" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': getDescriptionId(),
        'aria-required': required,
        'aria-invalid': error() ? true : 'false',
        id: uid,
        disabled: disabled
    }" name="postcode" aria-required="true" aria-invalid="false" id="zipcode">

And my checkout_index_index.xml :

<item name="postcode" xsi:type="array">
<!-- 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="config" xsi:type="array">
    <!-- Assigning a new template -->
    <item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/zipcode</item>

I Already have Vendor/Module/etc/zip_codes.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Directory:etc/zip_codes.xsd">

    <!-- Specify the country ISO code-->
    <zip countryCode="BR">
            <code id="pattern_1" active="true" example="12345">^[0-9]{5}$</code>
            <code id="pattern_2" active="true" example="12345-678">^[0-9]{2}\.[0-9]{3}\-[0-9]{3}$</code>


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.