';
// Ocultar el campo original pero mantenerlo para el envío
originalField.hide();
// Insertar los nuevos campos
fieldContainer.append(newFieldsHTML);
// Referencias a los nuevos campos
var countrySelect = $('#country-code-select');
var phoneInput = $('#phone-number-input');
// Función para actualizar el campo original
function updateOriginalField() {
var countryCode = countrySelect.val();
var phoneNumber = phoneInput.val().replace(/\D/g, '');
var fullNumber = countryCode + phoneNumber;
originalField.val(fullNumber);
originalField.trigger('change');
validateField();
}
// Función de validación
function validateField() {
var phoneNumber = phoneInput.val().replace(/\D/g, '');
var fieldWrap = originalField.closest('.field-wrap');
var errorContainer = $('#nf-error-16');
fieldWrap.removeClass('nf-fail nf-error');
phoneInput.removeClass('error');
countrySelect.removeClass('error');
if (phoneNumber.length === 0) {
fieldWrap.addClass('nf-fail nf-error');
phoneInput.addClass('error');
errorContainer.show();
} else if (phoneNumber.length < 6) {
fieldWrap.addClass('nf-fail nf-error');
phoneInput.addClass('error');
errorContainer.html('
El número de teléfono debe tener al menos 6 dígitos.
').show();
} else {
errorContainer.hide();
}
}
// Función para formatear el número mientras se escribe
function formatPhoneNumber(value) {
var numbers = value.replace(/\D/g, '');
return numbers.substring(0, 15);
}
// Event listeners
countrySelect.on('change', updateOriginalField);
phoneInput.on('input', function() {
const formatted = formatPhoneNumber(this.value);
this.value = formatted;
updateOriginalField();
});
phoneInput.on('blur', validateField);
// Si el campo original tiene un valor, parsearlo
var originalValue = originalField.val();
if (originalValue) {
var foundCode = null;
for (var i = 0; i < countryCodes.length; i++) {
if (originalValue.startsWith(countryCodes[i].code)) {
foundCode = countryCodes[i].code;
break;
}
}
if (foundCode) {
countrySelect.val(foundCode);
phoneInput.val(originalValue.substring(foundCode.length));
}
}
// Estilos CSS adicionales
var additionalStyles =
'';
// Agregar estilos
$('head').append(additionalStyles);
// Inicializar el campo
updateOriginalField();
// Interceptar el envío del formulario para asegurar que el valor esté actualizado
$(document).on('submit', 'form', function() {
updateOriginalField();
});
}
});