-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
91 lines (77 loc) · 3.37 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Autoselect user's country</title>
<link rel="stylesheet" href="css/prism.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/intlTelInput.css">
<link rel="stylesheet" href="css/isValidNumber.css">
</head>
<body>
<h1>Autoselect user's country and validate telephone number</h1>
<p>Autoselect user's country using <a href="//ipinfo.io/" target="_blank">ipinfo.io</a> and validate the phone number input using <a href="//github.com/googlei18n/libphonenumber" target="_blank">Google's liphonenumber</a> libraries.<br>
Based on <a href="//intl-tel-input.com/">International Telephone Input</a>, a jQuery plugin for entering and validating international telephone numbers.
</p>
<h2>Result</h2>
<input id="phone" type="tel">
<span id="valid-msg" class="hide">✓ Valid</span>
<span id="error-msg" class="hide">Invalid number</span>
<h3>Main Components</h3>
<ul>
<li>Auto select the user's current location (country) using an IP lookup(<a href="//ipinfo.io/" target="_blank">ipinfo.io</a>)</li>
<li>Automatically set the input field placeholder to an example number that matches that of the autoselected country</li>
<li>Navigate the country dropdown by typing a country's name, or using up/down keys</li>
<li>Handle phone number extensions</li>
<li>The user types their national number and the plugin gives you the full standardized international number</li>
<li>Full validation, including specific error types</li>
<li>Retina flag icons</li>
</ul>
<h2>Markup</h2>
<pre><code class="language-markup"><input id="phone" type="tel">
<span id="valid-msg" class="hide">✓ Valid</span>
<span id="error-msg" class="hide">Invalid number</span></code></pre>
<h2>Code</h2>
<pre><code class="language-javascript">
$("#phone").intlTelInput({
initialCountry: "auto",
geoIpLookup: function(callback) {
$.get('//ipinfo.io', function() {}, "jsonp").always(function(resp) {
var countryCode = (resp && resp.country) ? resp.country : "";
callback(countryCode);
});
},
utilsScript: "js/utils.js" // just for formatting/placeholders etc
});
var telInput = $("#phone"),
errorMsg = $("#error-msg"),
validMsg = $("#valid-msg");
// initialise plugin
telInput.intlTelInput({
utilsScript: "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");
} else {
telInput.addClass("error");
errorMsg.removeClass("hide");
}
}
});
// on keyup / change flag: reset
telInput.on("keyup change", reset);</code></pre>
<script src="js/prism.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/intlTelInput.js"></script>
<script src="js/defaultCountryIp.js"></script>
</body>
</html>