Hola,
Para usar este código es necesaria esta estructura:
- 1 elemento de container con 2 boxes:
- Dentro del primer box, agregar un form element con la siguiente configuración:
- El segundo box debe estar así:
Luego en CUSTOM CODES> CSS agregar el siguiente código:
.unvalid-num {
border: 2px solid red !important;
outline: none !important;
}
.valid-num {
border: 2px solid green !important;
outline: none !important;
}
Y dentro de BODY HTML agregar este código:
<script>
let max = 10;
let min = 3;
blockNonNumeric = true;
CountriesMap = [
{
"name": "Colombia",
"dial_code": "+57",
"code": "CO"
},
]
let selectCodes = document.querySelector('select[data-name="country-codes"]');
/******** code for Country codes application *********/
CountriesMap.forEach(element => {
let e = document.createElement("option");
e.value = "";
e.innerText = element.name;
e.value = element.dial_code;
selectCodes.appendChild(e);
});
selectCodes.addEventListener('change', () => {
injectCountryCode();
})
/********** code for length validation ***************/
const inpt = document.querySelector('input[data-type="phone"]');
inpt.classList.add("unvalid-num");
inpt.setAttribute('maxLength', max);
inpt.addEventListener('keydown', () => {
handleInput(event);
})
/***************************************************/
function handleInput(ev) {
let inputChar = ev.key;
console.log(ev.key);
const onlyContainsNumbers = (str) => /^\d+$/.test(str);
if(ev.key !== "Backspace" && !onlyContainsNumbers(ev.key) && blockNonNumeric) {
ev.preventDefault();
}
if (inpt.value.length < min || inpt.value.length > max) {
unvalidInpt(inpt);
} else {
validInpt(inpt);
}
}
function validInpt(inpt) {
inpt.classList.remove("unvalid-num");
inpt.classList.add("valid-num");
}
function unvalidInpt(inpt) {
inpt.classList.remove("valid-num");
inpt.classList.add("unvalid-num");
}
function injectCountryCode() {
let selectedCode = selectCodes.value;
alert(selectedCode);
inpt.value = selectedCode;
}
</script>
Pueden descargar la plantilla completamente configurada desde aquí
Recuerda tener tu dominio personalizado conectado para que los códigos funcionen en tus páginas
Recuerda tener tu dominio personalizado conectado para que los códigos funcionen en tus páginas.