80 lines
2.9 KiB
HTML
80 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Example: Validation</title>
|
|
<link rel="stylesheet" href="../css/prism.css">
|
|
<link rel="stylesheet" href="../../build/css/intlTelInput-1400377268998.css">
|
|
<link rel="stylesheet" href="../../build/css/demo-1400377268998.css">
|
|
|
|
<link rel="stylesheet" href="../css/validation-1400377268998.css">
|
|
|
|
|
|
<!-- GOOGLE ANALYTICS -->
|
|
<script>
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-26178728-1']);
|
|
_gaq.push(['_trackPageview']);
|
|
(function() {
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
})();
|
|
</script>
|
|
<!-- /GOOGLE ANALYTICS -->
|
|
</head>
|
|
|
|
<body>
|
|
<a href="../../../../intl-tel-input.html">Back</a>
|
|
<h1>Example: Validation</h1>
|
|
<p>Use public isValidNumber method (utilising Google's libphonenumber) to validate the telephone number on the change event.</p>
|
|
|
|
<h2>Markup</h2>
|
|
<pre><code class="language-markup"><input id="phone" type="tel" placeholder="e.g. +1 702 123 4567">
|
|
<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">var telInput = $("#phone"),
|
|
errorMsg = $("#error-msg"),
|
|
validMsg = $("#valid-msg");
|
|
|
|
// initialise plugin
|
|
telInput.intlTelInput({
|
|
validationScript: "../../lib/libphonenumber/build/isValidNumber.js"
|
|
});
|
|
|
|
// on blur: validate
|
|
telInput.blur(function() {
|
|
if ($.trim(telInput.val())) {
|
|
if (telInput.intlTelInput("isValidNumber")) {
|
|
validMsg.removeClass("hide");
|
|
} else {
|
|
telInput.addClass("error");
|
|
errorMsg.removeClass("hide");
|
|
validMsg.addClass("hide");
|
|
}
|
|
}
|
|
});
|
|
|
|
// on keydown: reset
|
|
telInput.keydown(function() {
|
|
telInput.removeClass("error");
|
|
errorMsg.addClass("hide");
|
|
validMsg.addClass("hide");
|
|
});</code></pre>
|
|
|
|
<h2>Result</h2>
|
|
<div id="result">
|
|
<input id="phone" type="tel" placeholder="e.g. +1 702 123 4567">
|
|
<span id="valid-msg" class="hide">✓ Valid</span>
|
|
<span id="error-msg" class="hide">Invalid number</span>
|
|
</div>
|
|
|
|
<script src="../js/prism.js"></script>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
<script src="../../build/js/intlTelInput.js?1400377268998"></script>
|
|
<script src="../js/validation.js?1400377268998"></script>
|
|
</body>
|
|
</html>
|
|
<!-- Localized --> |