{"id":373968,"date":"2023-03-25T15:04:27","date_gmt":"2023-03-25T15:04:27","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=373968"},"modified":"2023-03-30T06:48:36","modified_gmt":"2023-03-30T06:48:36","slug":"how-to-create-custom-input-mask-for-zip-code-in-magento2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/","title":{"rendered":"How to create custom input mask for zip code in Magento2?"},"content":{"rendered":"\n

When a customer specifies the country and zip code in the shipping address during checkout or shopping cart, Magento checks if the format of the entered code is valid for the specified country. This validation is implemented using the input masks for the zip code input field.<\/p>\n\n\n\n

You can check all the input mask for zip in the below file:<\/p>\n\n\n\n

<Magento_Directory_module_dir>\/etc\/zip_codes.xml. Now, Let’s learn the basic steps to add input mask for your country:<\/p>\n\n\n\n

    \n
  1. Create a zip_codes.xml in app\/code\/Vendor\/Module\/etc<\/strong>.<\/li>\n\n\n\n
  2. The content of the file should be similar to the following example:<\/li>\n<\/ol>\n\n\n\n
    <?xml version="1.0"?>\n\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Directory:etc\/zip_codes.xsd">\n\n    <!-- Specify the country ISO code-->\n    <zip countryCode="IN">\n        <!-- You can specify several patterns for one country -->\n        <codes>\n            <code id="pattern_1" active="true" example="123456">^[0-9]{6}$<\/code>\n        <\/codes>\n    <\/zip>\n<\/config><\/pre>\n\n\n\n
    You can define several zip code<\/code> patterns for the same country, by passing a list of codes<\/code>.
    <\/p>\n\n\n\n
    Remove a mask<\/h2>\n\n\n\n
    To remove a mask, in your zip_codes.xml<\/code> add the corresponding node and set active<\/code> attribute  to  false.<\/p>\n\n\n\n
    We hope it will help you. Thank you!!<\/p>\n\n\n\n
    If any issue or doubt please feel free to mention in comment section.<\/p>\n\n\n\n
    We would be happy to help. Happy Coding!!<\/p>\n","protected":false},"excerpt":{"rendered":"
    When a customer specifies the country and zip code in the shipping address during checkout or shopping cart, Magento checks if the format of the entered code is valid for the specified country. This validation is implemented using the input masks for the zip code input field. You can check all the input mask for zip […]<\/a><\/p>\n","protected":false},"author":375,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4381,302,1],"tags":[1161,2460],"class_list":["post-373968","post","type-post","status-publish","format-standard","hentry","category-checkout","category-magento2","category-uncategorized","tag-checkout","tag-magento-2"],"yoast_head":"\nHow to create custom input mask for zip code in Magento2? - Webkul Blog<\/title>\n<meta name=\"description\" content=\"When a customer specifies the country and zip code in the shipping address\u00a0during checkout or shopping cart, Magento checks if the format of\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create custom input mask for zip code in Magento2? - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"When a customer specifies the country and zip code in the shipping address\u00a0during checkout or shopping cart, Magento checks if the format of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-25T15:04:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-30T06:48:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Radhika Garg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Radhika Garg\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/\"},\"author\":{\"name\":\"Radhika Garg\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/1bfed7985110d44a908d093a4e322727\"},\"headline\":\"How to create custom input mask for zip code in Magento2?\",\"datePublished\":\"2023-03-25T15:04:27+00:00\",\"dateModified\":\"2023-03-30T06:48:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/\"},\"wordCount\":187,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"keywords\":[\"Checkout\",\"Magento 2\"],\"articleSection\":[\"CHECKOUT\",\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/\",\"name\":\"How to create custom input mask for zip code in Magento2? - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2023-03-25T15:04:27+00:00\",\"dateModified\":\"2023-03-30T06:48:36+00:00\",\"description\":\"When a customer specifies the country and zip code in the shipping address\u00a0during checkout or shopping cart, Magento checks if the format of\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create custom input mask for zip code in Magento2?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/1bfed7985110d44a908d093a4e322727\",\"name\":\"Radhika Garg\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2319613aaa0bc878e7855f009fc5a889134810d78fa0d1e693180b36f82156a3?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2319613aaa0bc878e7855f009fc5a889134810d78fa0d1e693180b36f82156a3?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Radhika Garg\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/radhika-garg178\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create custom input mask for zip code in Magento2? - Webkul Blog","description":"When a customer specifies the country and zip code in the shipping address\u00a0during checkout or shopping cart, Magento checks if the format of","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/","og_locale":"en_US","og_type":"article","og_title":"How to create custom input mask for zip code in Magento2? - Webkul Blog","og_description":"When a customer specifies the country and zip code in the shipping address\u00a0during checkout or shopping cart, Magento checks if the format of","og_url":"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-03-25T15:04:27+00:00","article_modified_time":"2023-03-30T06:48:36+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Radhika Garg","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Radhika Garg","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/"},"author":{"name":"Radhika Garg","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/1bfed7985110d44a908d093a4e322727"},"headline":"How to create custom input mask for zip code in Magento2?","datePublished":"2023-03-25T15:04:27+00:00","dateModified":"2023-03-30T06:48:36+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/"},"wordCount":187,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"keywords":["Checkout","Magento 2"],"articleSection":["CHECKOUT","Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/","url":"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/","name":"How to create custom input mask for zip code in Magento2? - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2023-03-25T15:04:27+00:00","dateModified":"2023-03-30T06:48:36+00:00","description":"When a customer specifies the country and zip code in the shipping address\u00a0during checkout or shopping cart, Magento checks if the format of","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-input-mask-for-zip-code-in-magento2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create custom input mask for zip code in Magento2?"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/1bfed7985110d44a908d093a4e322727","name":"Radhika Garg","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2319613aaa0bc878e7855f009fc5a889134810d78fa0d1e693180b36f82156a3?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2319613aaa0bc878e7855f009fc5a889134810d78fa0d1e693180b36f82156a3?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Radhika Garg"},"url":"https:\/\/webkul.com\/blog\/author\/radhika-garg178\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/373968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/375"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=373968"}],"version-history":[{"count":3,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/373968\/revisions"}],"predecessor-version":[{"id":374742,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/373968\/revisions\/374742"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=373968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=373968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=373968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}