jackocnr / intl-tel-input Goto Github PK

With tinypng.org for example you can reduce ~70% of file size.

Hi!
I wanted to use the SetNumber Function and this didn't work with the normal js, but when i changed the js to the min.js it works.

Is there anything I do wrong?
Thank you

Hi!
Bad background positions for flags in new build. Wrong flags now(
Example: ua ru us

Thnx

My code:

var options = {
    preferredCountries: ["DK", "SE", "LT", "NO", "UK", "PL", "LV", "EE"]
};
var a = $(".mobile-number").intlTelInput(options);

Result:
US flag is shown
Expected:
DK flag is shown

We can just generate them at runtime, based on the length of the dial code: it's just a plus, then a dot for each character of the dial code, then a space. This would reduce the filesize.

Hi,
I am using this plugin in my phonegap application on cordova 2.9.0. i have copied flags.png under assets/www/images folder and edited my css with -
.intl-tel-input .flag {background-image: url("images/flags.png");}
but i am unable to see country flags in dropdown list. could anyone solve this issue?

Thanks,
Ajinkya

I have confirmed that the following behavior exists in your demo (http://jackocnr.com/intl-tel-input.html) when using IE 10 under windows 8.

When you click inside the form input element to enter a number, the default "+1" appears and, in IE, the cursor is placed to the LEFT of the "+1", not to the right as one would expect. The code behaves as expected in Firefox and Chrome; only IE seems to show this issue.

The intl-tel-input plugin may already do this, but I have not been able to find an example of how...

I would like to get the ISO-2 code for the country selected, the dial code for that country, and the actual number (with or without the dial code) entered by the user from the input field. Is this reasonably possible?

Thank you,
Julie Dawn

By default the selected flag is the first of the list. I think that it would be a good enhencement to have a defaultMode option with 3 values (firrst/browser/blank):

• "first" would be the default and would keep the actual behavior were the first of the list is selected.
• "browser" would get the country from the browser locale.
• "blank" would display no flag

I'm not sure if the issue is regarding Google's libphonenumber or not. But when I fill in a valid number and add at the end like "ss" the number still shows as valid. If i replace the "ss" with a number like "11" it shows als not valid.

Valid number:

Added two letters - still valid:

Added three letters - invalid:

Replaced the letters with numbers - invalid:

I've tested it on the example (http://jackocnr.com/lib/intl-tel-input/examples/gen/validation.html)

I am using this plugin,i default set in as country

$("#mobile").intlTelInput({onlyCountries: ["in"]});

i manullay enter country and remove +91 code and simple put 10 digit mobile number and that is validating from server side as the format
if(params.mobile ==~ "^+(\d{1,4}) {1}?(\d{10})$"){//valid then do}else{//error not right formate}

in my html page i am seeing

In drop down div section is also not removing.How to fix this.In debugger i am seeing log as
TypeError: a.offset(...) is undefined
...Central African Republic (République centrafricaine)",i:"cf",d:"236"},{n:"Chad (...

This has been requested a couple of times, so I thought I'd open it up to debate.

If enabled, what would this change?

• When you select a flag, it will no longer insert the dial code in the input (or try to replace the dial code of any entered number), but instead insert the dial code into the selected-flag div. This will also happen during plugin initialisation (handling any existing input value, or a defaultCountry option), and also if the public method selectCountry is called. That said, when you select a diff flag, we will need to re-format any entered number.
• We will need some nice default styling for the separate dial code area.
• We will force the autoHideDialCode option to false, as this will no longer be relevant. Also this option would obviously be incompatible with the nationalMode option.
• The user will no longer be able to change the country/dial code just by typing in the input (see potential issue/solution below).
• We will need a public getNumber method, which returns the full number (inc. the dial code).
• Formatting/validation will have to be updated to use that getNumber method.

Potential issues:

• Devs may not realise they need to use the getNumber method instead of just using the input value, but maybe we just need to document this clearly...
• Users might be more likely to enter their national telephone numbers if there's no dial code right there in the box. E.g. in the UK, national numbers have an extra "0" at the beginning: "07733 123456", compared to international numbers: "+44 7733 123456", but perhaps this is just a case of getting the design right, so it looks like the dial code is part of the same string...
• Power users may be annoyed that you cant just type the whole number (inc. the dial code) - you have to faff around with clicking the dropdown. OR perhaps if they do type a dial code, that will automatically update the selected one?

Also worth noting that Google and Stripe don't do this on their web forms, but Skype do. To see Google's version, sign out of Gmail, and head to http://gmail.com and click signup. To see Stripe's version, go to https://stripe.com/docs/tutorials/checkout and hit "Pay with card" and then "Remember me". To see Skype's version, go to https://login.skype.com/account/signup-form.

Hello.
first of all thanks for everything.
i am trying to register some users data using intl-tel-input for telephone numbers. when i submit the form i lose the field value if i add the scripts. I tried without and it arrives at the second page.
this is the code:

input type="tel" name="mobile" id="mobile" size="20" />
span id="valid-msg" class="hide">✓ Valid
span id="error-msg" class="hide">Invalid number

script>
var telInput = $("#mobile"),
errorMsg = $("#error-msg"),
validMsg = $("#valid-msg");

// initialise plugin
telInput.intlTelInput({
  validationScript: "telefono/lib/libphonenumber/build/isValidNumber.js",
  preferredCountries: [ "co", "ec", "pe", "us", "it" ]
});

// on blur: validate
telInput.blur(function() {
  if ($.trim(telInput.val())) {
    if (telInput.intlTelInput("isValidNumber")) {
      validMsg.removeClass("hide");
    } else {
      telInput.addClass("error");
      errorMsg.removeClass("hide");
      validMsg.addClass("hide");
    }
  }
});

// on keydown: reset
telInput.keydown(function() {
  telInput.removeClass("error");
  errorMsg.addClass("hide");
  validMsg.addClass("hide");
});

telInput.intlTelInput("setNumber", "<?php echo $cellulare;?>");

/script>

the message on the next page is:

Notice: Undefined index: mobile in C:\xampp\htdocs\mioprogetto\amministrazione\elaboraVenditore.php on line 12

i can't understand what i am doing wrong...
thanks for your help

Hi there,

I'm trying to validate a phone number using libphonenumber.js ...but can't.
I've got the error Uncaught TypeError: undefined is not a function when trying to validate the field using the public method isValidNumber.

Could you help me ? :-)

Thanks!

The code:

$('input.phone-validation')
.intlTelInput({
    defaultCountry: 'be',
    preferredCountries: ['be', 'fr', 'nl'],
    validationScript: '/assets/js/libphonenumber.js'
})
.on('keyup change', function () {
    var $this = $(this);

    if ($.trim($this.val())) {
        console.log('- isValidNumber', $this.intlTelInput('isValidNumber'));
    }
});

My use case only requires US validation, and it seems that enabling nationalMode breaks the autoFormat functionality.

Is there any way to disable the country code without this happening?

Thanks great plugin. I was trying to use the field inside form. When submit the form, I was trying to get the value of the field. For example If I selected India (+91). I was expecting 91 in form $_post['mobile-number']. But It always return null. I just inspected element and just noticed the input field doesn't have value attrbute. Can you please fix this bug to use inside form.

<input type="tel" id="mobile-number" name="mobile-number">

Thanks
Gowri

It could be great if for every country selected the placeholder value is changed so that a valid phone number example is presented to the user based on the selected country.

I am getting an intermittent issue where $(window).load(function() doesn't always fire for the validationScript. Am currntly looking to see if JQuery isn't loaded correctly.

Also you should add an option to exclude the flags. The weight of the plugin is quite high :)

Good work all the same

Hi,

Thanks for the great plugin! I noticed that when I disable the input, I can still click and select the country dropdown.

In the end, I tried taking out the code that binds the event handler to the flag element and just call on/off via a toggle function.

I think it's good to provide a way to toggle the disabled and enabled for the telephone input since it's quite common in a form.

Regards,

Our users are still sometimes having trouble with the formatting of the phone number. One thing I'm looking at doing is putting the country code selection in it's on field. Then the user can tab into the next field and add their phone number.

It actually worked pretty well except for one thing. When I tab from the country code field to the phone number, the country code number goes away on blur. How do I make it stay there?

When user zoom page, sometime parts of neighbor flags are shown. Youtube uses 1px transparent border around image parts to prevent that behavior.

Also may be useful to create sample less/sass file with flags with mixin for placing parts of sprite to specified coords.

Using your Validation demo, I can see that it is possible to add alphanumeric character after the country code. But the input is still valid.

Indeed I think the libphonenumber from Google converts alphanumeric char to integer, but it seems that we can not get the converted value using your library. So the value will be something like : "+33 06 gg gg gg gg" that is not valid.

Note to self...

I disabled autoFormat on Chrome for Android a while back due to these errors (now being fixed):
https://code.google.com/p/chromium/issues/detail?id=184812
https://code.google.com/p/chromium/issues/detail?id=118639 <-- apparently the fix will be in v38

Review the situation when these fixes are pushed out to stable.

I'm using browserify for my project, so it would be great to see this on npm

Expose the formatting functionality in a static function, so devs can display formatted numbers on the page without putting them in an input and initialising the plugin. This would take 1 argument: the number, and would extract it's dial code, and use that to fetch the formatting information.

We already have 2 static methods: getCountryData and setCountryData (at the bottom of intlTelInput.js) so we can copy the style of those to create new ones. Only problem I foresee is accessing private instance methods that we will need to use, like _getDialCode and _getCountryData. Perhaps these could be updated to be static methods as well.

I have placed the widget inside a parent container with a fixed height. When the dropdown gets opened, it becomes cropped due to this. This behavior was not present in an earlier version I used (I guess the implementation changed somehow?).

I'm working on a website that uses the javascript included in https://metacpan.org/module/Locale::Simple to localize various strings with data from our PO files. I'd like to localize the country names of intl-tel-input as well, but you've done an extremely good job of making that inaccessible it seems. Can you advise on a way to do this, or maybe implement some public interface towards the country data, so i can do this without forking the JS?

The current flag icons look pretty bad on my new retina macbook.

Hello :)
I was happy to know your Github.
Thanks a lot!

I'm developing using C#.
I'd like to use this Jquery Plugin. So I tried hard...
Unfortunately, I Couldn't do that...

Is it impossible?

I need to have two phone fields with one under the other, but when i open the dropdown of the upper one, the flag of the lower input overlaps the dropdown of the upper one.

Currently we only have telephone number formats (masks) for 34 out of 233 countries (see data.js)! This is actually the same as Stripe's system, but we can do better!

Easiest ways to find them are through wikipedia e.g. National conventions for writing telephone number or Telephone numbers in the United Kingdom.

Or through Google's libphonenumber library, demo here. Or if you're real smart with regex, you might be able to pull it straight from the source.

And currently it's just 1 format per country, so if you find a country which can have multiple formats (depending on what numbers you type), just try to figure out what the most common one is!

Not sure if these are currently available (they're not doc'd in the README).

Right now I'm retrieving the value using .val(). The API I'm submitting to requires the country code separate from the number. The number is submitted as a 10 digit phone number. So... I'm going to have to perform some replaces on the retrieved value.

It would be hugely helpful to have .intlTelInput('area') and .intlTelInput('local') methods to retrieve portions of the number.

Thanks for this awesome component! Really appreciate it!

Hi,

The demo project references to a jquery file, that not exists in the path.

Cheers,
Máté

Hi,
congratulations for this script, it's amazing.
I've noticed that it doesn't work on IE8... it's give error so it's stop all the javascript executions on the page.
There's a way to make it compatible with IE8?
At least to not throw errors?
Thanks in advance and sorry for my english :)

Bootstrap sets padding for text input boxes with selector 'input[type="text"]' which is more specific than the selector for relevant style rule in intlTelInput ('.intl-tel-input.inside input').

This is easily fixed by making the selector specific enough to override Bootstrap style: '.intl-tel-input.inside input[type="text"], .intl-tel-input.inside input[type="tel"]' to handle both text and phone number input types.

├─┬ intl-tel-input#1.1.8
│ └── jquery#2.1.1 incompatible with ~1 (1.11.1 available, latest is 2.1.1)

I think you should support jquery 2.x :) because it works!

Hi,

Just thought to let you know phoneformat.js works well with your library. Maybe you could at least document that?

To give you an idea how to integrate, consider the example below:

$('input[type="tel"]').intlTelInput({
    americaMode: false
}).on('keyup', function() {
    var $e = $(this);
    var selectedCountry = parseProperty($e.parent().find('.selected-flag .flag'), 'flag').toUpperCase();
    var val = $e.val();

    if(isValidNumber(val)) $e.removeClass('invalid');
    else $e.addClass('invalid');
});

function parseProperty($e, name) {
    var classes = getClasses($e);

    return classes.filter(function(v) {
        return v != name;
    })[0];

    function getClasses($e) {
        return $e.attr('class').split(' ');
    }
}

That selectedCountry bit is nasty and I have to fetch the country name by discarding that flag class. But it works. :)

Hello and thanks before all :)

1. I had a form that worked ok: the telephone input value arrive to server on php $_POST array.
2. I have implemented intl-tel-input plugin and the input is enriched and works very well on webpage. Great! If I run on Firebug console...

$("#smsnumber").val()

... the value returned is ever correct.
3) The problem is that now the telephone input value don't arrive to server :( Where is the problem? I don't see any information on docs about it: Have I got to implement any bypass via intlTelInput object or something like that?

This is the original field:

<input type="text" placeholder="ej. +34 123 456 789" id="smsnumber" value="+34123456789" name="smsnumber">

And with the plugin implementation...

        <script type="text/javascript">
            $(document).ready(function() {
                var smsNumber = $("#smsnumber");
                smsNumber.intlTelInput({
                    defaultCountry: "es",
                    preferredCountries: ["es", "fr"]}
                );
            });
        </script>

... the field results like that (I omit the countries ul list):

<div class="intl-tel-input inside" id="abId0.4194940533477812">
  <input type="text" placeholder="ej. +34 123 456 789" id="smsnumber" value="+34123456789" name="smsnumber">
  <div class="flag-dropdown">
    <div class="selected-flag" title="Spain (España): +34">
      <div class="flag es">
        <div class="arrow">
        </div>
      </div>
    </div>
  </div>
</div>

A lot of thanks for your help!

Hi, when i put input tag into "Label" Tag, country dropdown list didn't show when i click on selected flag and dropdown list has hide class yet...

Hello,

is it possible to set another locale?

Kind regards,
Michael

I could not able to use back space or arrows to change or delete the digit entered by mistake. I have to select them and delete it.

Please correct this behavior. I have checked it here http://jackocnr.com/lib/intl-tel-input/examples/gen/validation.html

e.g: $('#telephone').setDefaultCountry('GB');

This would change which country the input is set to, intended for use only before the user has entered anything (so if they've selected a country themselves, I don't think it would make sense to change that)

This would be useful when multiple inputs on a form need to vary based on the user's country - for example if you had an address input and a telephone input, you might want to adapt both visually based on their country, but only ask them for their country once. This way if they select their country in some previous form step, when we show them an empty telephone input, we can have their country already selected.

(It could also be used for guessing what country to display based on e.g. geolocation)

would be nice if there was a change event triggered when country is changed in the dropdown

hi im missing a publich destroy method

.intlTelInput('destroy')

it would unbind all event listeners
and reset the el to initial state

thanks

Hi, first of all, great lib, thanks for developing and most of all sharing with us guys :)

I'm using it on a little script and i've got an issue, dont know if you noticed or even are troubled by it, but here goes.
When you use the TAB key to navigate over the fields (i have 9 phone fields) the _focus function isn't called and because of that all the text is selected. For instance, if you "tab" away to another field that has no value you are adding the "+1 (" automatically and then all that auto text is selected and this can create some inserts difficulties. I've looked around a bit to try to figure out but remembered to ask if you had any opinions on this.
Note: if you use the mouse click this issue doesn't occur.

When opening a dialog from jQuery-ui, the flag from the plugin gets over the new window.

In the file intlTelInput.scss, element .intl-tel-input .selected-flag (line 97), removing the z-index:1; element solve the issue.

Hi,

Would it be possible to add some triggers for the dropdown? I need to be able to catch when it's opened and closed. This applies to closing via keyboard too.

Currently I'm using a very custom hack that relies on a certain CSS structure. Having something in the library itself would be very useful and avoid possible breakage in the future.

It could be useful to display the phone number with formatting and country flag only in read only (without events), like on a "Display" page or a "Print" page.

Vatican City is incorrect, see: http://en.wikipedia.org/wiki/Telephone_numbers_in_Vatican_City

should be:
+39 06 698

Question: what is the 5th parameter here used for (sometimes blank, 0,1 or 2)

[ "United States", "us", "1", "+. (...) ...-....", 0 ],

I see 590 is shared between Guadeloupe, Saint-Barthélemy and Saint Martin but Guadeloupe's 5th parameter is blank when - shouldn't it be zero if there are three that share; should it be counted as 0,1,2 because there are three countries?

If I am wrong, please can you explaine the fifth parameters use to me?

Thank you