Verification does not work with INTL-TEL-INPUT

Question

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

I included css at the top of the sheet

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

My form is in the middle with the identifier "tel" ... I also use parsley to check parts of the form, and this works fine,

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

and at the bottom of my page I have included 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 takes the flags of the country, so the plug-in works, but the checks are not performed. The utils.js file is a “compiled” version of the file, which I believe is the right one to use, but I tried both the compiled and non-compiled versions.

What am I missing here? Why does validation and formatting not work?

thanks.

Answer 1

To verify operation, you need to call the utils.js verification functions. Example below

 $("#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'); } } }); 

Answer 2

I had a problem with a similar presentation, in which it turned out that it was loading the module, but I did not receive an input check.

I found that the problem was that intlTelInput.js was not fully loaded when I tried to access its input field.

I tested it by allowing the page to load, and validation worked as expected. At any time, when I used it quickly, validation did not work. In addition, the getNumber method would also return "", even if the input field had a value.

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

BTW, when the verification code works correctly, the contents of the field will be formatted in the style of the country you selected from the "flags" drop-down list. For example, when I select "US", my default format is [phone]

Answer 3

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

Link Content:

 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 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 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 (eg 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", "[phone]"); 6. STATIC METHODS getCountryData: Get all of the plugin 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 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 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 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