Demo: Pure JavaScript intl-tel-input

demo-pure-javascript-intl-tel-input.markdown

Demo: Pure JavaScript intl-tel-input

A Pen by Shueny Wang on CodePen.

License.

index.html

<h1>Demo: Pure JavaScript International Telephone Input</h1>
<p>Note: this demo pulls in the pure JavaScript plugin code from <a href="https://codepen.io/jackocnr/pen/ggzEjv" target="_blank">this codepen</a>.</p>

<form>
  <input type="tel">
  <button type="submit">Validate</button>
</form>

<p id="result"></p>

script.js

var input = document.querySelector("input"),
    form = document.querySelector("form"),
    result = document.querySelector("#result");

var iti = intlTelInput(input, {
  initialCountry: "tw"
});

form.addEventListener("submit", function(e) {
  e.preventDefault();
  var num = iti.getNumber(),
      valid = iti.isValidNumber();
  result.textContent = "Number: " + num + ", valid: " + valid;
}, false);

input.addEventListener("focus", function() {
  result.textContent = "";
}, false);

scripts

<script src="https://codepen.io/jackocnr/pen/ggzEjv.js"></script>

style.scss

body {
  margin: 20px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/9.0.6/css/intlTelInput.css" rel="stylesheet" />
<link href="http://intl-tel-input.com/node_modules/intl-tel-input/build/css/demo.css?3" rel="stylesheet" />