Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This html page shows an example of using intTelInput JS Lib for validation of phone numbers.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/css/intlTelInput.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/js/intlTelInput.min.js"></script>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded', ()=>{
var phones=document.querySelectorAll('input[name=phone]');
for (var i = phones.length - 1; i >= 0; i--) {
processInput(phones[i]);
}
});
function processInput(phone){
var iti = window.intlTelInput(phone,{
allowDropdown: false,
initialCountry: 'RU',
nationalMode: true,
autoPlaceholder: 'aggressive',
formatOnDisplay: true,
separateDialCode: false,
utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/js/utils.min.js'
});
phone.addEventListener('input', ()=> {
phone.setCustomValidity('');
if (!iti.isValidNumber()) phone.setCustomValidity('!!!');
});
}
</script>
<form>
<input id='phone1' type='tel' name='phone' required autocomplete='tel' />
<button type='submit'>Submit</button>
</form>
<br/>
<br/>
<form>
<input id='phone2' type='tel' name='phone' required autocomplete='tel' />
<button type='submit'>Submit2</button>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment