Hi saheem,
Refer below sample code.
HTML
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.5/css/intlTelInput.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.5/js/intlTelInput.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.5/js/utils.js"></script>
<style>
.hide {
display: none;
}
.error {
display: block;
}
</style>
<script type="text/javascript">
$(function () {
var telInput = $("#txtPhone");
var errorMsg = $("#lblError");
var validMsg = $("#lblValid");
var code = "+911234567890";
telInput.val(code);
telInput.intlTelInput({
autoHideDialCode: true,
autoPlaceholder: "ON",
dropdownContainer: document.body,
formatOnDisplay: true,
hiddenInput: "full_number",
initialCountry: "auto",
nationalMode: true,
placeholderNumberType: "MOBILE",
preferredCountries: ['US'],
separateDialCode: true
});
FormatNumber();
telInput.keyup(function () {
FormatNumber();
});
telInput.blur(function () {
if ($.trim(telInput.val())) {
if (telInput.intlTelInput("isValidNumber")) {
validMsg.removeClass("hide");
} else {
telInput.addClass("error");
errorMsg.removeClass("hide");
validMsg.addClass("hide");
}
}
});
telInput.keydown(function () {
telInput.removeClass("error");
errorMsg.addClass("hide");
validMsg.addClass("hide");
});
function FormatNumber() {
var number = telInput.val();
var classf = $(".selected-flag > div").attr("class");
var flag = classf.slice(-2);
var formattedNumber = intlTelInputUtils.formatNumber(number, flag, intlTelInputUtils.numberFormat.INTERNATIONAL);
telInput.val(formattedNumber.slice(formattedNumber.indexOf(' ') + 1, formattedNumber.length));
}
});
</script>
</head>
<body>
<input id="txtPhone" type="tel">
<span id="lblValid" class="hide" style="color:green;">✓ Valid</span>
<span id="lblError" class="hide" style="color:red;">Invalid number</span>
</body>
</html>
Demo
