Validation no working with INTL-TEL-INPUT

Question

I'm trying to use intl-tel-input... https://github.com/Bluefieldscom/intl-tel-input#utilities-script

I've included the css at the top of the sheet

<link rel="stylesheet" href="css/intlTelInput.css">

My form in the middle with "tel" id... I am also using parsley to validate parts of the form, and that is working fine,

<input class="form-control input-sm"  id="tel" name="tel" type="tel" data-parsley-required>

and at the bottom of my page i included the jquery, bootstrap, etc... and intl-tel-input js....

 <script src="js/jquery.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script src="js/parsley.js"></script>
 <script src="js/intlTelInput.min.js"></script>

And then i initialize the utility...

$("#tel").intlTelInput({
            utilsScript: "js/utils.js"
});

The form element picks up the country flags, so the plug in appears to be working, but no validation is occurring. The utils.js file is the "compiled" version of the file, which i believe is the correct one to use - but i've tried both the compiled and non compiled version.

What am i missing here? why isn't the validation and formatting working?

thanks.

score 10 · Answer 1 · answered Jul 21 '16 at 07:32

For working validation you need call utils.js validation functions See below example

$("#tel").change(function()
{
  var telInput = $("#tel");
  if ($.trim(telInput.val())) 
  {
    if (telInput.intlTelInput("isValidNumber")) 
    {
      console.log(telInput.intlTelInput("getNumber"));
      alert('Valid' );
    }
    else 
    {
      console.log(telInput.intlTelInput("getValidationError"));
      alert('invalid');
    }
  }
});

score 1 · Answer 2 · answered Jan 29 '16 at 20:21

1

I had problem with a similar presentation, in that it appeared to load the module but I didn't get validation of the input.

I found my problem was that the intlTelInput.js wasn't fully loaded when I tried to access the input field that was using it.

I tested it by allowing the page to fully load, and the validation worked as expected. Any time I used the quickly, however, validation didn't work. Further, the getNumber method would also return "" even if the input field had a value.

Check two things: 1) Is intlTelInput.min.js fully loaded when you use the field? If not, delay access to the field until the script is loaded. 2) Is the path for utilScript correct? This library is required for validation.

BTW, when the validation code is working properly, the field contents will format in the style of the country you have selected from the 'flags' dropdown. For example, when I select "US" my default format is (202) 555-1212

answered Jan 29 '16 at 20:21

Mark West

161
8

1

I'm new to this. Can someone help me understand why this was downvoted? – Mark West Feb 14 '16 at 20:47
Not sure @Mark, but since I thought your answer was helpful, I've given it a +1 – osullic Feb 16 '16 at 12:17
I have validation working, but the field contents are not formatting in the style of the selected country. Any idea why that would be? – L Becker Apr 06 '16 at 16:22
@LBecker, my experience is that if the field contents don't fit the country then the number isn't formatted. For instance, if I enter a US number and then select UK as the country, the contents are unformatted because the number doesn't make sense in UK context. Can you describe more about your problem? Perhaps create a new post with examples and some code? – Mark West Apr 06 '16 at 17:43

Santosh Anantharamaiah · Answer 3 · 2015-06-30T09:40:45.973

http://js-tutorial.com/international-telephone-input-711 this would be helpful for you.

Content of the link:

1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="build/css/intlTelInput.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="build/js/intlTelInput.min.js"></script>
2. HTML
<input type="tel" id="mobile-number">
3. JAVASCRIPT
$("#mobile-number").intlTelInput();
4. OPTIONS
Note: any options that take country codes should be lower case ISO 3166-1 alpha-2 codes
autoHideDialCode: If there is just a dial code in the input: remove it on blur, and re-add it on focus. This is to prevent just a dial code getting submitted with the form.
Type: Boolean Default: true
defaultCountry: Set the default country by it's country code. Otherwise it will just be the first country in the list.
Type: String Default: ""
defaultStyling: The position of the selected flag: "inside" or "outside" (relative to the input).
Type: String Default: "inside"
dialCodeDelimiter: Choose the delimiter that is inserted after the dial code when the user selects a country from the dropdown.
Type: String Default: " "
nationalMode: Don't insert the international dial code when the user selects a country from the dropdown.
Type: Boolean Default: false
onlyCountries: Display only the countries you specify.
Type: Array Default: undefined
preferredCountries: Specify the countries to appear at the top of the list.
Type: Array Default: ["us", "gb"]
validationScript: Enable validation by specifying the URL to the included libphonenumber script. This ~200k script is fetched only when the page has finished loading (to prevent blocking), and is then accessible through the publicisValidNumber function.
Type: String Default: "" Example: "lib/libphonenumber/build/isValidNumber.js"
5. METHODS
destroy: Remove the plugin from the input, and unbind any event listeners
$("#mobile-number").intlTelInput("destroy");
getSelectedCountryData: Get the country data for the currently selected flag
$("#mobile-number").intlTelInput("getSelectedCountryData");
Returns something like this:
{
  name: "Afghanistan (‫افغانستان‬‎)",
  iso2: "af",
  dialCode: "93"
}
isValidNumber: Validate the current number using Google's libphonenumber (requires the validationScript option to be set correctly). Expects an internationally formatted number. Optionally pass the argument true to accept national numbers as well.
$("#mobile-number").intlTelInput("isValidNumber");
Returns: true/false
selectCountry: Select a country after initialisation (e.g. when the user is entering their address)
$("#mobile-number").intlTelInput("selectCountry", "gb");
setNumber: Insert a number, and update the selected flag accordingly
$("#mobile-number").intlTelInput("setNumber", "+44 77333 123 456");
6. STATIC METHODS
getCountryData: Get all of the plugin's country data
var countryData = $.fn.intlTelInput.getCountryData();
Returns an array of country objects:
[{
  name: "Afghanistan (‫افغانستان‬‎)",
  iso2: "af",
  dialCode: "93"
}, ...]
setCountryData: Set all of the plugin's country data
$.fn.intlTelInput.setCountryData(countryData);
7. VALIDATION
International number validation is hard (it varies by country/district). The only comprehensive solution I have found is Google's libphonenumber, which I have precompiled into a single JavaScript file and included in the lib directory. Unfortunately even after minification it is still ~200kb, so I have included it as an optional extra. If you specify the validationScript option then it will fetch the script only when the page has finished loading (to prevent blocking), and will then be accessible through the public isValidNumber function.
8. CSS
Image path: Depending on your project setup, you may need to override the path to flags.png in your CSS.
.intl-tel-input .flag {background-image: url("path/to/flags.png");}
Input margin: For the sake of alignment, the default CSS forces the input's vertical margin to 0px. If you want vertical margin, you should add it to the container (with class intl-tel-input).
Displaying error messages: If your error handling code inserts an error message before the <input> it will break the layout. Instead you must insert it before the container (with class intl-tel-input).
Share

Please add information from the link to your answer as links can die. — JackWhiteIII, Jun 30 '15 at 08:56
@Mark West : Please accept the answer, if it has solved your problem. — Santosh Anantharamaiah, Aug 17 '16 at 12:42

Validation no working with INTL-TEL-INPUT

3 Answers3