Zip code validation in checkout


I want to add validation to zip code in the checkout.

I’ve edited the code in design\themes\responsive\templates\views\profiles\components\profiles_scripts.tpl

(function(_, $) {

    /* Do not put this code to document.ready, because it should be
       initialized first
    $.ceRebuildStates('init', {
        default_country: '{$settings.Checkout.default_country|escape:javascript}',
        states: {$states|json_encode nofilter}

    $.ceFormValidator('setZipcode', {
        US: {
            regexp: /^(\d{5})(-\d{4})?$/,
            format: '01342 (01342-5678)'
        CA: {
            regexp: /^(\w{3} ?\w{3})$/,
            format: 'K1A OB1 (K1AOB1)'
        RU: {
            regexp: /^(\d{6})?$/,
            format: '123456'
        PL: {
            regexp: /^(\d{2})(-\d{3})?$/,
            format: '01342 (01342-5678)'

}(Tygh, Tygh.$));

And according to the docs (Microformats — CS-Cart 4.17.x documentation) I should add class to label cm-zipcode? Should I do this directly in the unitheme? If yes, then which file should I edit? I’m stuck with this one and would appreciate the help!

Thanks in advance! :wink:

Please check if the following file exists


Change it and clear cache

Thanks for the response. Following file doesn’t exist. I thought that it inherits files from responsive theme and I’ve made my changes design\themes\responsive\templates\views\profiles\components\profiles_scripts.tpl but in checkout the label tag is missing the cm-zipcode. The question is which file should I modify to add this class?

The modified script $.ceFormValidator(‘setZipcode’, { … is visible in the debugger in the source code.

The documentation sasy:

  • cm-zipcode - the element value must be a valid zip code (every country has its own zip code format, so the pattern is to be defined in the country table, but so far manually - the method $.ceFormValidator('setZipcode', {...})).

I’ve checked if the class ‘cm-zipcode’ is in the code in the checkout on and on and there is no this class.

In the code in file design/themes/responsive/templates/views/profiles/components/profile_fields.tpl on line 106:

105         for={$element_id}
106         class="ty-control-group__title cm-profile-field {if $field.autocomplete_type == "phone-full" || $field.field    _type == "ProfileFieldTypes::PHONE"|enum}cm-mask-phone-label{/if} {if $required == "Y"}cm-required cm-trim{/if}{if $    field.field_type == "Z"} cm-zipcode{/if}{if $field.field_type == "E"} cm-email{/if} {if $field.field_type == "Z"}{if     $section == "S"}cm-location-shipping{else}cm-location-billing{/if}{/if}"
107     >{$field.description}</label>

The field type is ‘Z’ and it still doesn’t show class cm-zipcode in checkout. Is this a bug? Please help me :wink:

@CS-Cart_team could you confirm if it’s a bug?

Does your profile field have the Zip/postal code type?


As I can see, the following condition:

{if $field.field_type == "Z"}

is not the only one in the above template that precedes the addition of this class. Could you please provide the step-by-step instruction how can the issue be reproduced in the demo? The dev demo could play the role of a suitable environment to reproduce this issue:


  1. Go to checkout on
  2. Find zip code field
  3. In the code there should be cm-zipcode class in the label for the zipcode input (but it’s not there)
  4. The validator for the zipcode doesn’t work because there is no class cm-zipcode in the label

The template design/themes/responsive/templates/views/profiles/components/profile_fields.tpl is not used by default at the checkout, so it won’t be triggered there. The only page I can currently remember, that uses this template is the Profile details, and the cm-zip class is present there for the zip code field.

Thanks for the response. So the question is how to add the cm-zipcode class to input in checkout?

I have lots of complaints from logistics department that the zipcode is not in a correct format and customers are filling it with wrong data.

I’ve checked in the admin panel but there is no place where I can add this.

You’re welcome.

You will need to add the form validator to the checkout page, and add the cm-zip value to the User-defined CSS class field of the required profile field.

cm-zip or cm-zipcode? The documentation says that it should be cm-zipcode. Moreover adding it to User-defined CSS class adds it in the input class not in the label for the input field. The documentation says that this class should be added to the label of the input.

Is the documentation wrong or the method you provided? Can you check it on and paste the url here?

Thanks in advance

Yes, you are correct, I’m sorry for mislead. It should be cm-zipcode and in the label element, not in the input, so adding it to the profile field class won’t work.

You may need to override the following template:
and change this code:

        {elseif $field.field_type == "ProfileFieldTypes::POSTAL_CODE"|enum}
            {$field_type_class_postfix = "{$field_type_class_postfix}input"}

to something like this:

        {elseif $field.field_type == "ProfileFieldTypes::POSTAL_CODE"|enum}
            {$label_meta = " cm-zipcode"}
            {$field_type_class_postfix = "{$field_type_class_postfix}input"}

You will also need to include the views/profiles/components/profiles_scripts.tpl template, which defines the regular expressions for this field to be applied:

{include file="views/profiles/components/profiles_scripts.tpl"}

I haven’t tested this, so you need to be careful when making changes.