' + '
' + '' + '
' + '
'; // 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(); }); } });