Zip/Postcode Validation Error

[jamiedickinson]

I have a problem on Prestashop. I dont know if it is a Prestashop or theme issue. I have set Default Country on Localization to United Kingdom, but on signup screen customer default is still USA. This is only a small issue.
Main issue is when customer signs up to add a new address it says UK postcode is incorrect (comes up with a cross), but format is correct. Coincidentally, it will still allow the customer to register, but many customers are put off when they see the red cross.

 

In back office "Does it need Zip/postal code?" is "Yes" and "Zip/postal code format" is *blank* so people suggested it could be a validation query run by my theme. It does let people register still but it comes up with a X in 'Postcode' when you type a postcode.

Website link:

 http://ishopstyle.co.uk/en/address

- Prestashop version
1.6.1.1
- Warehouse theme version
3.6.1

[Ms E]

I have the same problem.  Yes the postal code is in the correct format, and it does indeed allow the customer to proceed.  But that big X is likely to cause us  to loose a new customer.  

 

 

Prestashop version 1.6.1.0

[MrsDusty]

I'm struggling with this too. I would like to know how to stop the red x appearing. I need to capture the postcode so turning it off won't help.

 

Virgin install of Prestashop version 1.6.1.0. Added United Kingdom from the localisation menu, changed defaults to UK.

Edited October 27, 2015 by MrsDusty (see edit history)

[it05jb]

I am also having this issue.....it makes customers think the postcode is invalid, but pressing continue lets them through.

[DekaS]

You can remove the "required" class from the container div, also remove the "validate" class from the input and the "data-validate" from "[theme]/address.tpl"
 
Before: 
 

<div class="required postcode form-group unvisible">
 <label for="postcode">{l s='Zip/Postal Code'} <sup>*</sup></label>
 <input class="is_required validate form-control" data-validate="{$address_validation.$field_name.validate}" type="text" id="postcode" name="postcode" value="{if isset($smarty.post.postcode)}{$smarty.post.postcode}{else}{if isset($address->postcode)}{$address->postcode|escape:'html':'UTF-8'}{/if}{/if}" />
</div>

After: 

 

<div class="postcode form-group unvisible">
 <label for="postcode">{l s='Zip/Postal Code'} <sup>*</sup></label>
 <input class="is_required form-control" type="text" id="postcode" name="postcode" value="{if isset($smarty.post.postcode)}{$smarty.post.postcode}{else}{if isset($address->postcode)}{$address->postcode|escape:'html':'UTF-8'}{/if}{/if}" />
				</div>

This works for me.

Edited November 27, 2015 by DekaS (see edit history)

[innercode]

Hello,

 

I was looking for a solution myself and found this topic.

 

This strange behaviour is because of statesManagement.js script. There is a function named setCountries(). At the end of the function there is:

countries = countriesPS;

If you do not use states, you can simply remove it.

 

Also you can see the code above why this happens. To be honest I do not understand the reason why it is done like this. It seems that "countries" variable is used for states and for zip validation, but instead of extending/merging countries array it is overwritten.

Edited February 29, 2016 by innercode (see edit history)

[elmoxx]

Innercode, you saved my day! Thank you very much. This fix did the trick!

[pdaalmeer]

Helo,

where can i found this file statesManagement.js?  Same problem here.

[Malkus]

Helo,

where can i found this file statesManagement.js?  Same problem here.

themes\default-bootstap\js\tools\

[peggy king]

I don't know what it is, but SOMETHING is preventing my customers from b eing able to buy from my site.  I've heard something about the zip code field....don't know if this is the same issue.  I only ship within the US and Canada.  is there something I can do to fix this - I am NOT a developer and do not have HTML knowledge.

[innercode]

Could you provide the link to your store?

[peggy king]

Thank you.  My store is www.bythebeads.com

[innercode]

Ordering to US is fine, but there is a bug with ordering to Canada. It is set that Canada contains states but for some reason it disappears when changing to Canada.

 

ZIP code is ok, except its field validation (frontend part). Entering correct ZIP, it marks with red X that it is not correct, but it passes validation on submit.

 

We can help you with this issue, if you wish, write us PM or send us an email.

[peggy king]

if this "Red X" th

ing is a bug, why hasn't prestashop fixed it.   I'm pretty sure I'm loosing sales here.  And I've seen other posts about it.

[biopanos]

If you want use states, go the file statesManagement.js and change the line countries = countriesPS; to countries == countriesPS; This works for me.

 

DONT WORKING sry

Edited June 30, 2016 by biopanos (see edit history)

[pdaalmeer]

thanks, works fine

[Smiles]

Found the solution an proper fix for 1.6.1.6 updaters with this issue:

 

http://www.inmotionhosting.com/support/community-support/prestashop-15/zippostal-code-problems-in-prestashop

 

Basicly update the file statesManagement.js with this file in your default an current theme. https://raw.githubusercontent.com/PrestaShop/PrestaShop/1.6.1.x/themes/default-bootstrap/js/tools/statesManagement.js

 

No clue why this fix is not included in the 1.6.1.6 update....

[1sarthak2]

I want to add a list of postcodes and validate it and display message ....Please Help

[kerlin]

Hello, I've the same problem. Before the website was with PS 1.6.0.9 and it worked fine.
Now it's PS 1.6.1.6 and I have also the problem with the zipcode.

I tried with the StatesManagement.js, replacing the old with the code found on Github, but nothing changes.
I tried with this file form an other PS version. Nothing change.
 

Could you help me please ?

Thanks a lot

[qiqiy_888]

/*

* 2007-2015 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.org/licenses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

*  @author PrestaShop SA <[email protected]>

*  @copyright  2007-2015 PrestaShop SA

*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)

*  International Registered Trademark & Property of PrestaShop SA

*/

//global variables

var countriesNeedIDNumber = [];

var countriesNeedZipCode = [];

 

$(document).ready(function(){

setCountries();

bindStateInputAndUpdate();

bindUniform();

bindPostcode();

bindCheckbox();

$(document).on('click', '#invoice_address', function(e){

bindCheckbox();

});

});

 

function setCountries()

{

if (typeof countries !== 'undefined' && countries)

{

var countriesPS = [];

   for (var i in countries)

{

var id_country = countries['id_country'];

if (typeof countries['states'] !== 'undefined' && countries['states'] && countries['contains_states'])

{

countriesPS[id_country] = [];

    for (var j in countries['states'])

countriesPS[parseInt(id_country)].push({'id' : parseInt(countries['states'][j]['id_state']), 'name' : countries['states'][j]['name']});

}

if (typeof countries['need_identification_number'] !== 'undefined' && parseInt(countries['need_identification_number']) > 0)

countriesNeedIDNumber.push(parseInt(countries['id_country']));

if (typeof countries['need_zip_code'] !== 'undefined' && parseInt(countries['need_zip_code']) > 0)

countriesNeedZipCode[parseInt(countries['id_country'])] = countries['zip_code_format'];

}

}

countries =  countriesPS;

}

 

function bindCheckbox()

{

if ($('#invoice_address:checked').length > 0)

{

$('#opc_invoice_address').slideDown('slow');

if ($('#company_invoice').val() == '')

$('#vat_number_block_invoice').hide();

bindUniform();

}

else

$('#opc_invoice_address').slideUp('slow');

}

 

function bindUniform()

{

$("select.form-control,input[type=radio],input[type=checkbox]").uniform(); 

}

 

function bindPostcode()

{

$(document).on('keyup', 'input[name=postcode]', function(e)

{

$(this).val($(this).val().toUpperCase());

});

}

 

function bindStateInputAndUpdate()

{

$('.id_state, .dni, .postcode').css({'display':'none'});

updateState();

updateNeedIDNumber();

updateZipCode();

 

$(document).on('change', '#id_country', function(e)

{

updateState();

updateNeedIDNumber();

updateZipCode();

});

 

if ($('#id_country_invoice').length !== 0)

{

$(document).on('change', '#id_country_invoice', function(e)

{

updateState('invoice');

updateNeedIDNumber('invoice');

updateZipCode('invoice');

});

updateState('invoice');

updateNeedIDNumber('invoice');

updateZipCode('invoice');

}

 

if (typeof idSelectedState !== 'undefined' && idSelectedState)

$('.id_state option[value= + idSelectedState + ]').prop('selected', true);

if (typeof idSelectedStateInvoice !== 'undefined' && idSelectedStateInvoice)

$('.id_state_invoice option[value= + idSelectedStateInvoice + ]').prop('selected', true);

}

 

function updateState(suffix)

{

$('#id_state' + (typeof suffix !== 'undefined' ? '_' + suffix : '')+' option:not(:first-child)').remove();

if (typeof countries !== 'undefined')

var states = countries[parseInt($('#id_country' + (typeof suffix !== 'undefined' ? '_' + suffix : '')).val())];

if (typeof states !== 'undefined')

{

$(states).each(function(key, item){

$('#id_state' + (typeof suffix !== 'undefined' ? '_' + suffix : '')).append('<option value="' + parseInt(item.id) + '">' + item.name + '</option>');

});

 

$('.id_state' + (typeof suffix !== 'undefined' ? '_' + suffix : '') + ':hidden').fadeIn('slow');

$('#id_state, #id_state_invoice').uniform();

}

else

$('.id_state' + (typeof suffix !== 'undefined' ? '_' + suffix : '')).fadeOut('fast');

}

 

function updateNeedIDNumber(suffix)

{

var idCountry = parseInt($('#id_country' + (typeof suffix !== 'undefined' ? '_' + suffix : '')).val());

if (typeof countriesNeedIDNumber !== 'undefined' && in_array(idCountry, countriesNeedIDNumber))

{

$('.dni' + (typeof suffix !== 'undefined' ? '_' + suffix : '') + ':hidden').fadeIn('slow');

$('#dni').uniform();

}

else

$('.dni' + (typeof suffix !== 'undefined' ? '_' + suffix : '')).fadeOut('fast');

}

 

function updateZipCode(suffix)

{

var idCountry = parseInt($('#id_country' + (typeof suffix !== 'undefined' ? '_' + suffix : '')).val());

if (typeof countriesNeedZipCode !== 'undefined' && typeof countriesNeedZipCode[idCountry] !== 'undefined')

{

$('.postcode' + (typeof suffix !== 'undefined' ? '_' + suffix : '') + ':hidden').fadeIn('slow');

$('#postcode').uniform();

}

else

$('.postcode'+(typeof suffix !== 'undefined' ? '_' + suffix : '')).fadeOut('fast');

}

 

 

 

replace the statesManagement.js with this code, works fine for me. thank you all

[nini2016]

Hello,

I've the same problem. The PS verion is 1.6.1.6 and I have also the problem with the zipcode. Red square and big X

I tried to replace StatesManagement.js, with the code found on Github, but nothing changes.
I tried the code from "qiqiy_888", nothing change.

 

Could you help me please ?

[veldepatrick]

Hi, I also tried all mentioned solutions, but it just doesn't work. Still red cross.

Prestashop 1.6.1.10

 

Anyone?

Edited March 15, 2017 by veldepatrick (see edit history)

[helldog2004]

I am having the same issue with the lingerie theme.

I can't find the line which need to be removed.

I am not making use of the states, and the following is my StatesManagement.js file

/**
* Template Prestashop SweetLingerie
*
* @author    Prestacrea
* @copyright Prestacrea
* @license   See PDF documentation
* @website   http://www.prestacrea.com
*/

$(document).ready(function()
{	
	bindStateInputAndUpdate();
});

function bindStateInputAndUpdate()
{
	$('.id_state, .dni, .postcode').css({'display':'none'});
	updateState();
	updateNeedIDNumber();
	updateZipCode();

	$('select#id_country').change(function(){
		updateState();
		updateNeedIDNumber();
		updateZipCode();
	});

	if ($('select#id_country_invoice').length !== 0)
	{
		$('select#id_country_invoice').change(function(){   
			updateState('invoice');
			updateNeedIDNumber('invoice');
			updateZipCode('invoice');
		});
		updateState('invoice');
		updateNeedIDNumber('invoice');
		updateZipCode('invoice');
	}
}

function updateState(suffix)
{
	$('select#id_state'+(suffix !== undefined ? '_'+suffix : '')+' option:not(:first-child)').remove();
	var states = countries[$('select#id_country'+(suffix !== undefined ? '_'+suffix : '')).val()];
	if(typeof(states) !== 'undefined')
	{
		$(states).each(function (key, item){
			$('select#id_state'+(suffix !== undefined ? '_'+suffix : '')).append('<option value="'+item.id+'"'+ (idSelectedCountry === item.id ? ' selected="selected"' : '') + '>'+item.name+'</option>');
		});
		$('.id_state'+(suffix !== undefined ? '_'+suffix : '')+':hidden').fadeIn('slow');
	}
	else
		$('.id_state'+(suffix !== undefined ? '_'+suffix : '')).fadeOut('fast');
}

function updateNeedIDNumber(suffix)
{
	var idCountry = parseInt($('select#id_country'+(suffix !== undefined ? '_'+suffix : '')).val());
	if ($.inArray(idCountry, countriesNeedIDNumber) >= 0)
		$('.dni'+(suffix !== undefined ? '_'+suffix : '')+':hidden').fadeIn('slow');
	else
		$('.dni'+(suffix !== undefined ? '_'+suffix : '')).fadeOut('fast');
}

function updateZipCode(suffix)
{
	var idCountry = parseInt($('select#id_country'+(suffix !== undefined ? '_'+suffix : '')).val());
	if (countriesNeedZipCode[idCountry] !== 0)
		$('.postcode'+(suffix !== undefined ? '_'+suffix : '')+':hidden').fadeIn('slow');
	else
		$('.postcode'+(suffix !== undefined ? '_'+suffix : '')).fadeOut('fast');
}

[rene]

the problem with the red x lies in the translation, im in german /Switzerland) and after i changed in the ch lang file the term festnetznummer in telefon and uploaded it the red cross in zip field changed to a green ok sign. it has to do witth the translation file, in the theme/lang folder.

Edited January 27, 2018 by rene (see edit history)

[Smiles]

On 1/27/2018 at 8:16 PM, rene said:

the problem with the red x lies in the translation, im in german /Switzerland) and after i changed in the ch lang file the term festnetznummer in telefon and uploaded it the red cross in zip field changed to a green ok sign. it has to do witth the translation file, in the theme/lang folder.

 

Can you explain a bit more in depth what you have done? I have the same issue in my dutch theme......

[rene]

i changed the term Festnetznummer in de theme / lang file translation into telefon and reuploaded the translation ch file and the it worked, perhaps you only have to reupload the translate file: theme/lang/your-lang

[Andreea S.]

Hi guys, the error is still here in 2018, P.S. version 1.6.1.22 (wow!) 

So, just as the initial post in 2015 said:

1. I have set a Default Country on Localization, but on signup screen customer default is still USA.
2. Main issue is when customer signs up to add a new address, although the postal code format is correct and it does indeed allow the customer to proceed, instead of a green checkpoint, there's a big X!

I have noticed this only happens for countries where no state is maintained. Help, please!

[Stefano C.]

It's incredible! The same issue in 2018 (version 1.6.23)!!!

 

[wasserbett]

i changed the term Festnetznummer in de theme / lang file translation into telefon and reuploaded the translation ch file and the it worked, perhaps you only have to reupload the translate file: theme/lang/your-lang

 

this solution is valid only to the next update, 

 

 

Edited December 5, 2018 by wasserbett (see edit history)

[wasserbett]

i solved the problem by choosing 5 step orderflow. instead the one step orderflow

[Juebec]

Hi everyone. 

I have problems with a bunch of these issues too. Some of which I have managed to solve, some that are still persistent.

I am working on a local copy, so the live site is still running.

It started with an upgrade from a pretty old version (1.6.0.6) to 1.6.1.23. Most of the problems have to do with how customer adds an address.

First problem was that ZIP code did not show, but was required. I solved this by changing some code in address.tpl in the theme. The the issue is still with the states that is required and but the list is empty. I have tried to update/change and do all sorts of things with the statesMangement.js file but nothing changes. Empties chase after each change of course. 

Another bug I have is that when I change country the form does not auto update as it did before to represent the current country's form. So if I change from a country like Canada or US to a country that does not have states, the state field is still present. But it correctly applies postcode format rules and it's ok to make an address without state in this case. 

I will continue looking for solutions but am happy if anyone have some input on this. 

 

EDIT: Btw, I believe the issue is related to the theme itself, so even if it is an old bug it is not directly in the version 1.6.1.23, but it has something to do when updating to newer version that screws up theme-based implementations. 

Edited December 5, 2018 by Juebec (see edit history)

[Juebec]

In the end I just used another theme that worked, but I later came across a thing that might be worth checking out for anyone experiencing the same problems and don't wanna swap theme. I had problem getting the email to show on  the invoice and at first glance everything seemed ok, but then I noticed the slight change in code.

On the old code it was written:

{$customer.email}

But after changing to: 

{$customer->email}

It worked! So it got me thinking that this might be the kind of change that could be the problem to this issue.

So for anyone coming across this issue again, check the code for the loading of states.  

[CSEpe]

Remove the bold text in de following files:       Theme Transcendent

cache\smarty\compile\14\63\a3\1463a337bf275bc99ef4968af0a1e132073dfaa2.file.order-opc-new-account.tpl.php

line 259:
<input type="text" class="text form-control validate" name="postcode" id="postcode" data-validate="isPostCode" value="<?php if (isset($_smarty_tpl->tpl_vars['guestInformations']->value)&&isset($_smarty_tpl->tpl_vars['guestInformations']->value['postcode'])&&$_smarty_tpl->tpl_vars['guestInformations']->value['postcode']) {?><?php echo $_smarty_tpl->tpl_vars['guestInformations']->value['postcode'];?>


themes\[your theme]\order-opc-new-account.tpl

line 149
<input type="text" class="text form-control validate" name="postcode" id="postcode" data-validate="isPostCode" value="{if isset($guestInformations) && isset($guestInformations.postcode) && $guestInformations.postcode}{$guestInformations.postcode}{/if}" onkeyup="$('#postcode').val($('#postcode').val().toUpperCase());" />

line 178
<input type="text" class="text form-control validate" name="postcode" id="postcode" data-validate="isPostCode" value="{if isset($guestInformations) && isset($guestInformations.postcode) && $guestInformations.postcode}{$guestInformations.postcode}{/if}" onkeyup="$('#postcode').val($('#postcode').val().toUpperCase());" />

Edited February 18, 2020 by CSEpe (see edit history)