Skip to content

Instantly share code, notes, and snippets.

@pmaojo
Created September 26, 2018 19:01
Show Gist options
  • Save pmaojo/5965f4476034eb31aaadcee858ac60f5 to your computer and use it in GitHub Desktop.
Save pmaojo/5965f4476034eb31aaadcee858ac60f5 to your computer and use it in GitHub Desktop.
Demo: Pure JavaScript intl-tel-input
<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>
var input = document.querySelector("input"),
form = document.querySelector("form"),
result = document.querySelector("#result");
var iti = intlTelInput(input, {
initialCountry: "us"
});
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);
<script src="https://codepen.io/jackocnr/pen/ggzEjv.js"></script>
body {
margin: 20px;
}
<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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment