Use public isValidNumber method (utilising Google's libphonenumber) to validate the telephone number on the change event.
<input id="phone" type="tel">
<span id="valid-msg" class="hide">✓ Valid</span>
<span id="error-msg" class="hide">Invalid number</span>
var telInput = $("#phone"),
errorMsg = $("#error-msg"),
validMsg = $("#valid-msg");
// initialise plugin
telInput.intlTelInput({
utilsScript: "../../lib/libphonenumber/build/utils.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");
});