Hello everyone I use the intl-tel-input library included all the files
I tried to change the file to a minified intl-tel-input.min.js so well it didn't help, tried to change the number format. Also I thought that the library has not fully loaded and loaded it in window onload functions the result was not changed. By the way in the official example validation works exactly the same way with the same bug. The implementation of my code was taken from this example, by the way, this is also an error https://stackoverflow.com/a/44541797/17471849
the problem is that when you initially enter the number and it passed validation or failed it and then switch to another country and enter the phone number, the format becomes incorrect and the last digit is missing
To reproduce the issue: if you switch from to another country, enter it, it does not matter whether it is correct or incorrect and then switch to another country, the number validation does not pass! I can't enter all the numbers.Instead of 10 digits, only 9 are entered
$(document).ready(function () {
const phoneFields = document.querySelectorAll('.field--phone');
var iti = [];
var isValidPhone = null;
phoneFields.forEach((field) => {
iti.push(window.intlTelInput(field, {
hiddenInput: "full_number",
nationalMode: false,
formatOnDisplay: true,
separateDialCode: true,
autoHideDialCode: true,
autoPlaceholder: "aggressive" ,
initialCountry: "ru",
placeholderNumberType: "MOBILE",
geoIpLookup: function(callback) {
$.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
var countryCode = (resp && resp.country) ? resp.country : "";
callback(countryCode);
});
},
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.21/js/utils.js"
}));
});
iti.forEach((field) => {
field.telInput.addEventListener('focus', () => {
iti.forEach(field => {
field.telInput.classList.remove('focused');
});
field.telInput.classList.add('focused');
field.telInput.addEventListener('change', function(){
if (typeof intlTelInputUtils !== 'undefined'){
var currentText = field.getNumber(intlTelInputUtils.numberFormat.E164);
if (typeof currentText === 'string') {
field.setNumber(currentText);
}
}
isValidPhone = field.isValidNumber();
console.log(field.isValidNumber())
})
});
})
function submitForm(e){
e.preventDefault();
phoneFields.forEach((field) => {
if (!isValidPhone) {
iti.forEach(field => {
if (field.telInput.classList.contains('focused')) {
field.telInput.classList.add('is-invalid');
}
})
} else {
iti.forEach(field => {
if (field.telInput.classList.contains('focused')) {
field.telInput.classList.remove('is-invalid');
field.telInput.classList.add('is-valid');
}
})
}
})
}
document.querySelectorAll('.btn').forEach(btn => btn.addEventListener('click', submitForm))
var mask1 = $(".field--phone").attr('placeholder').replace(/[0-9]/g, 0);
$(document).ready(function(){
$('.field--phone').mask(mask1)
});
$(".field--phone").on("countrychange", function(e, countryData) {
$(".field--phone").val('');
var mask1 = $(".field--phone").attr('placeholder').replace(/[0-9]/g, 0);
$('.field--phone').mask(mask1);
});
});.is-valid{
border: 2px solid rgb(7, 181, 44);
background-color: green;
}
.is-invalid{
border: 2px solid red;
background-color: red !important;
}
.focused{
border: none;
background-color: aquamarine;
} <link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.21/css/intlTelInput.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.21/js/utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.21/js/intlTelInput.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"></script>
<form >
<input class="field--phone" placeholder="your phone" type="tel">
<button class="btn">Send</button>
</form>
<form >
<input class="field--phone" placeholder="your phone" type="tel">
<button class="btn">Send</button>
</form>
<form >
<input class="field--phone" placeholder="your phone" type="tel">
<button class="btn">Send</button>
</form>
<form >
<input class="field--phone" placeholder="your phone" type="tel">
<button class="btn">Send</button>
</form>
<form >
<input class="field--phone" placeholder="your phone" type="tel">
<button class="btn">Send</button>
</form>
<script src="form2.js"></script>