Uncaught Error: No country data for 'undefined about intl-tel-input HOT 23 CLOSED

The first problem is with your geoIpLookup function. As per the readme, you must always call the first callback argument, even in the event of failure. And if you update to the latest version of the plugin, I've just made it so that in the event of an error, you can call the callback with no arguments and it will gracefully fall back to displaying another country (based on other initialisation options, or else just the first one in the list). This should clear up your initial console errors, and set an initial country correctly, which means the plugin will not be in a broken state at least!

The next problem is with validation. You say that on submit, "It validates via AJAX", and yet when I tried it, it did a full page load, which is different to using Ajax! So firstly, I would encourage you to do client-side validation first, using the isValidNumber method, and only submit to the backend when you have a valid number, as this will make your life much easier. If for whatever reason you can't do this, then I would recommend you use the hiddenInput option, which at least (in the case that the user enters a valid number) will give you the full international number to store on your backend, and also to re-initialise the plugin with later, which will then set the country correctly etc. However, in order to handle invalid numbers with full page loads... you need a way to re-set the selected country after the page load - to do this you will need to send the selected country code to the backend as well, and then use this when displaying the page again, passing it to the plugin using the initialCountry option. Does that make sense?

from intl-tel-input.

The initialCountry case issue has been fixed in the latest release - it no longer requires lowercase.

As for the empty flag situation, I appreciate your input, and I agree it may not be an edge case after all - there may be lots of cases where neighbouring countries share the same valid phone patterns, and then initialCountry is set to one country which is most likely for their users, but then the user is actually in/from a neighbouring country and autofills their national number and it validates and then you're in a really sticky situation as it seems like everything has worked fine when it really hasn't.

I think we should add a new allowEmptyCountry option (which takes a boolean, but defaults to false for now), and if it's set to true, and they don't specify a country, then we leave the country unselected. This will just be a grey square for now, which to me is ugly and unclear what it's for, but the design can be improved later.

I also think we should add a note to the initialCountry option warning of this danger you have identified.

What do you think?

from intl-tel-input.

I used this one: https://www.svgrepo.com/svg/508681/flag-ww

from intl-tel-input.

Yeah it would be helpful to have a demo to play with, with clear instructions on how to reproduce the error. If it helps you can fork this codepen.

from intl-tel-input.

Here it is:
https://iti-demo.webtools.gr/sample-page/

This demo uses api token for ipinfo that do not allow this domain. Therefore the auto prefix/country by IP will not work.
This helps in order to reproduce the issue.
So in the form - type an invalid phone without selecting any country flag.
Click submit. The form will be invalid.
Throughout this procedure and before the submission, browser console throws another error:
Uncaught (in promise) TypeError: b[a] is not a function"

Furthermore, right after the submission when the form is invalidated (server side - no submission yet), the error "Uncaught Error: No country data for 'undefined" appears.

At that moment, the field is not more able to be validated client side.

Now, I may select a country, change a bit the value of the phone input (with an invalid still phone), re-submit.
Form still invalidates - no submission yet, but now the error Error: No country data for 'undefined" is gone.
I can make changes to the value of the phone field and get results if it's valid or not.

Let me know if you need more info.

from intl-tel-input.

Btw I've just tweaked the hiddenInput option so now it includes a 2nd hidden input that includes the selected country code. Hope this helps. (released in v19.2.19)

from intl-tel-input.

My bad regarding the AJAX... I forgot to enable AJAX for that form. It is enabled now. But, anyway the issues are similar and I am proceeding with it. Thanks

from intl-tel-input.

It looks like the geo lookup is working now, but then you're passing data.country_code into the callback which is null - instead you want data.country.

Additionally, if you update to the latest version, it will handle geo lookup failures much better.

from intl-tel-input.

I have fixed most of my issues on my localhost.
For now I have make it to select a default country (the first country in the list) if there is no other country set. Also, storing the country locally, and later retrieving it in case of a reload (or whatever), to avoid multiple calls to the IPinfo api and also to have the country selected in case of a reload etc.

This helps in general, however I now realise that this might not be the most optimal scenario. For example, the user may insert/type his phone number and forget to select the right country. It is possible that the phone will still be valid, but with the wrong prefix.
I just tested it with form autofill with a phone number that does not have the prefix. The pre-selected flag was Australia in my case (first country in the list of preferred countries) and my local phone which isn't an Australian one was valid. I was able to submit the form with a wrong prefix.

So, is it possible to have no country selected if the auto (by IP) isn't working, so any phone number in the field will not be valid, enforcing the user to at least deal with the Flags dropdown. (If a user in this case select a wrong flag and his phone will still be valid it is something we can not deal anyway).

from intl-tel-input.

I'm glad things are working better now.

I just tested it with form autofill with a phone number that does not have the prefix. The pre-selected flag was Australia in my case (first country in the list of preferred countries) and my local phone which isn't an Australian one was valid. I was able to submit the form with a wrong prefix.

Yes this is not ideal, but I think it's also an edge case - that (1) the user autofills their phone number, and (2) it doesn't include an international dial code, and (3) the number also happens to be valid in whichever country is first in the list, and (4) the user doesn't notice that the wrong flag is displayed. I think that combination of events is very unlikely to happen.

Whereas if we start things off with a blank flag, it makes it completely unclear what the dropdown is even for. In my opinion, starting off with the first country in the list is a much better user experience, as it makes it clear what the dropdown is for and what the user has to do.

It's a trade-off, but this is my opinion for now. I'll close this issue for now, but do let me know if you have any more thoughts.

from intl-tel-input.

Hello @jackocnr
coming back to report that the case I described earlier is not that edge case as we thought... Have already a good percentage of users who submit phone numbers that get validated without changing the default country (Australia in my case), but their number is not an Australian one. Probably the auto country did not work on these cases.
Furthermore, I found another website that is also using the ITI plugin. They have set France as the default country and it looks like they don't use auto-ip. In their case, I can submit phone french-like phone numbers (e.g. Switzerland phone number) and those numbers will get validated again as French ones.
So validating a number with the wrong prefix is something that may occur under various conditions.

My managers are not happy with this, although I have explained them everything that is involved. They requested improvements with the goal of ensuring that users cannot submit a phone number with the incorrect prefix.

Revisiting our earlier discussion, I'm bringing back the idea of implementing an empty country/flag option for cases where the auto-IP detection fails or if we opt to remove the auto-IP feature entirely. As an alternative consideration, or perhaps a fallback solution if the first option proves unfeasible, I'm also reevaluating the possibility of setting the USA as the default flag. This approach hinges on the assumption that the unique format of USA phone numbers might increase the rate of invalidation for incorrectly entered numbers from users outside the USA, thereby enhancing our system's accuracy.

Any thoughts?

from intl-tel-input.

Hmm... it also looks like it doesn't respect the initialCountry option.
I have removed everything related to auto and the preferred countries, defined initialCountry = 'US' and this seems to have no effect at all. It always default to the first country of the list.

Options:
autoInsertDialCode: true
autoPlaceholder: "polite"
countrySearch: false
initialCountry: "US"
nationalMode: false
showSelectedDialCode: true
useFullscreenPopup: false
utilsScript: '{script url}'

from intl-tel-input.

I forked the demo you shared earlier, and it appears that the 'initialCountry' feature isn't functioning there either.

Check here: https://codepen.io/jmbeat/pen/eYXogaY

from intl-tel-input.

Update: it looks like it requires the country code in lowercase.

from intl-tel-input.

I think we should add a new allowEmptyCountry option (which takes a boolean, but defaults to false for now), and if it's set to true, and they don't specify a country, then we leave the country unselected.

Sounds good.

This will just be a grey square for now, which to me is ugly and unclear what it's for, but the design can be improved later.

Regarding the empty grey square - my initial solution was to not have a default country somehow if the auto wasn't working. I was getting that grey square. That solution had my previous issues though, but especially for the grey square I found a flag like icon - not one of a country - and I used that through css.

from intl-tel-input.

Can you share your generic flag icon?

from intl-tel-input.

Out of interest, can I ask why you still use the preferredCountries option instead of the new country search?

from intl-tel-input.

I switched to the country Search, but the managers didn't like it and requested to use the preferred countries (around 6-7 countries which are the target audience the the majority of the leads comes from).

from intl-tel-input.

managers aye 🙄

from intl-tel-input.

I just added a defaultToFirstCountry option in v19.3.0 - it's set to true by default, but try setting it to false and let me know how it works for you. I haven't added a new icon yet - I'll do that when I next have some time.

from intl-tel-input.

I've added a new globe icon in v19.5.0 - let me know what you think.

from intl-tel-input.

Thanks for these updates. I have been busy with other tasks, which I need to complete before March 7, when I will be travelling abroad. I am going to integrate the latest version and test the new features, but I am not sure about the when.
At the moment - the thing works with the USA as default country and it doesn't cause big headaches to my managers, since the majority of the leads come from USA.
I will let you know once I have implemented the latest updates.

from intl-tel-input.

No worries. I'll close this for now then, but do have a look when you can 👍

from intl-tel-input.