Skip to content

Instantly share code, notes, and snippets.

@dvygolov

dvygolov/PhoneNumberValidation.html

Last active December 29, 2021 11:19
Show Gist options
  • Save dvygolov/52e4237a4aeb32c907139332aa76d8fd to your computer and use it in GitHub Desktop.
Save dvygolov/52e4237a4aeb32c907139332aa76d8fd to your computer and use it in GitHub Desktop.
Download ZIP
This html page shows an example of using intTelInput JS Lib for validation of phone numbers.
Raw
PhoneNumberValidation.html
<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