jackocnr / intl-tel-input Goto Github PK
View Code? Open in Web Editor NEWA JavaScript plugin for entering and validating international telephone numbers
Home Page: https://intl-tel-input.com
License: MIT License
A JavaScript plugin for entering and validating international telephone numbers
Home Page: https://intl-tel-input.com
License: MIT License
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'));
}
});
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.
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 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
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)
├─┬ 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!
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):
The current flag icons look pretty bad on my new retina macbook.
This has been requested a couple of times, so I thought I'd open it up to debate.
If enabled, what would this change?
Potential issues:
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.
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é
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.
Hello and thanks before all :)
$("#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!
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.
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.
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...
would be nice if there was a change event triggered when country is changed in the dropdown
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
Hello,
is it possible to set another locale?
Kind regards,
Michael
Hi!
Bad background positions for flags in new build. Wrong flags now(
Example: ua ru us
Thnx
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.
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.
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.
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
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
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?
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
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.
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.
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.
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 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 (...
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.
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?
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 im missing a publich destroy method
.intlTelInput('destroy')
it would unbind all event listeners
and reset the el to initial state
thanks
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,
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.
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)
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 :)
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
With tinypng.org for example you can reduce ~70% of file size.
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
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.
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
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. :)
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.
I'm using browserify
for my project, so it would be great to see this on npm
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?
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.