Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/css/intlTelInput.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/js/intlTelInput.min.js"></script>
</head>
<body>
<input id="phone" type="tel">
<span id="valid-msg" class="hide">✓ Valid</span>
<span id="error-msg" class="hide">Invalid number</span>
</body>
</html>
 
var telInput = $("#phone"),
  errorMsg = $("#error-msg"),
  validMsg = $("#valid-msg");
var input = document.querySelector("#phone"),
    errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"],
    form = document.querySelector("form"),
    result = document.querySelector("#result");
var iti_el = $('.iti.iti--allow-dropdown.iti--separate-dial-code');
        if(iti_el.length){
            iti.destroy();
        }
function getIp(callback) {
 fetch('https://ipinfo.io', { headers: { 'Accept': 'application/json' }})
   .then((resp) => resp.json())
   .catch(() => {
     return {
       country: '',
     };
   })
   .then((resp) => callback(resp.country));
}
// initialise plugin
telInput.intlTelInput({
  nationalMode: true,
             formatOnDisplay: true,            
             placeholderNumberType: "MOBILE",
             autoHideDialCode: false,
                autoPlaceholder: "aggressive" ,
                autoHideDialCode: "genuine", 
                initialCountry: "auto",
                separateDialCode: true,
                preferredCountries: ['il','ge'],
                geoIpLookup: getIp,
utilsScript:"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.4/js/utils.js"
});
var reset = function() {
  telInput.removeClass("error");
  errorMsg.addClass("hide");
  validMsg.addClass("hide");
};
// on blur: validate
telInput.blur(function() {
  reset();
  if ($.trim(telInput.val())) {
    if (telInput.intlTelInput("isValidNumber")) {
      validMsg.removeClass("hide");
      var getCode = telInput.intlTelInput('getSelectedCountryData').dialCode;
       alert(getCode);
    } else {
      telInput.addClass("error");
      errorMsg.removeClass("hide");
    }
  }
});
// on keyup / change flag: reset
telInput.on("keyup change", reset);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers