<script>
let regexFormatPhoneNumber="";
let regexPhoneNumber="";
let formatPhoneNumber="";
let placeholderPhoneNumber="";
let idCountryPhoneNumber=false;
let phoneCodePhoneNumber=false;
let phoneInputIdPhoneNumber=false;
let countryInputIdPhoneNumber=false;
let phoneCodeInputIdPhoneNumber=false;
let maxDigits =10;
const initPhoneNumberFormat = async (id,countryInputId,phoneCodeInputId) => {
phoneInputIdPhoneNumber = id;
countryInputIdPhoneNumber = countryInputId;
phoneCodeInputIdPhoneNumber = phoneCodeInputId;
// console.log('phoneCodeInputIdPhoneNumber---------------');
// console.log(phoneCodeInputIdPhoneNumber);
//Get from the database the regex and format.
let inputPhoneJq=$("#"+id);
const result = await phoneNumberFormat(inputPhoneJq.val());
inputPhoneJq.val(result);
inputPhoneJq.attr('placeholder',placeholderPhoneNumber);
inputPhoneJq.attr('data-regex',regexFormatPhoneNumber);
const inputPhone = document.getElementById(id);
inputPhone.addEventListener('keydown',enforceFormat);
inputPhone.addEventListener('keyup',formatToPhone);
if(countryInputIdPhoneNumber) {
document.getElementById(countryInputIdPhoneNumber).addEventListener('change', initToPhone);
}
$('#'+phoneCodeInputIdPhoneNumber).on('change', initToPhoneByChangeCode);//This is for select2
return result
}
const phoneNumberFormat = async(inputValue) => {
await getPhoneNumberFormatByCountryCode();
if(regexPhoneNumber) {
inputValue = inputValue.replace(/\D/g, '').substring(0, maxDigits); // First x digits of input only
regexPhoneNumber = regexPhoneNumber.replaceAll('/', '');
//Phone number:
return inputValue.replace(new RegExp(regexPhoneNumber), formatPhoneNumber);
}
inputValue = inputValue.replace(/\D-/g, '').substring(0, maxDigits); // First x digits of input only
return inputValue;
}
const formatToPhone = async(event) => {
if(isModifierKey(event)) {return;}
event.target.value = await phoneNumberFormat(event.target.value);
event.target.attributes['placeholder']=placeholderPhoneNumber;
};
const isNumericInput = (event) => {
const key = event.keyCode;
return ((key >= 48 && key <= 57) || // Allow number line
(key >= 96 && key <= 105) // Allow number pad
);
};
const isSeparatorInput = (event) => {
const key = event.keyCode;
return (key==189); // Allow "-"
};
const isModifierKey = (event) => {
const key = event.keyCode;
return (event.shiftKey === true || key === 35 || key === 36) || // Allow Shift, Home, End
(key === 8 || key === 9 || key === 13 || key === 46) || // Allow Backspace, Tab, Enter, Delete
(key > 36 && key < 41) || // Allow left, up, right, down
(
// Allow Ctrl/Command + A,C,V,X,Z
(event.ctrlKey === true || event.metaKey === true) &&
(key === 65 || key === 67 || key === 86 || key === 88 || key === 90)
)
};
const initToPhone = (event) => {
enforceFormat(event);
formatToPhone(event);
};
const initToPhoneByChangeCode = async() => {
//When th Phone code change, then update phone number format
let phoneInputIdPhoneNumberId="#" + phoneInputIdPhoneNumber;
const result = await phoneNumberFormat($(phoneInputIdPhoneNumberId).val());
$(phoneInputIdPhoneNumberId).val(result);
$(phoneInputIdPhoneNumberId).attr('placeholder', placeholderPhoneNumber);
$(phoneInputIdPhoneNumberId).attr('data-regex', regexFormatPhoneNumber);
};
const enforceFormat = (event) => {
// Input must be of a valid number format or a modifier key, and not longer than ten digits
if(!isNumericInput(event) && !isModifierKey(event)){
if((regexFormatPhoneNumber==="") && isSeparatorInput(event)){
//ignore this case. This happens when the regex is not defined and the char is -
}
else{
event.preventDefault();
}
}
};
function getPhoneNumberFormatByCountryCode(){
let checkDone = $.Deferred();
let idCountry = 0;
if(countryInputIdPhoneNumber) {
idCountry = $('#' + countryInputIdPhoneNumber + ' option:selected').val();
}
let phoneCode = $('#'+phoneCodeInputIdPhoneNumber+' option:selected').text();
if(phoneCode!==phoneCodePhoneNumber || idCountry!==idCountryPhoneNumber) {
$.ajax({
data: {idCountry: idCountry, phoneCode: phoneCode},
type: 'post',
url: "{{ path('phone_format_by_country_code') }}",
success: function (data) {
// console.log('data');
// console.log(data);
if (data) {
regexFormatPhoneNumber=data['regexFormat'];
regexPhoneNumber=data['regex'];
formatPhoneNumber=data['format'];
placeholderPhoneNumber=data['placeholder'];
maxDigits=data['maxDigits'];
idCountryPhoneNumber=idCountry;
phoneCodePhoneNumber=phoneCode;
$("#"+phoneCodeInputIdPhoneNumber).attr('placeholder',placeholderPhoneNumber);
}
checkDone.resolve();
},
fail: function() {
checkDone.resolve();
}
});
}
else{
checkDone.resolve();
}
return $.when(checkDone).done(function(){
// Asyncs tasks are done
}).promise();
}
</script>