Custom code para validar números de teléfono en checkout de Funnelish

Español
,
1

Hola, alguien me puede ayudar para personalizar el custom code de la nueva actualizacion del editor de funnelish, cuando limito que un cliente ponga minimo 10 número y máximo 10 números para que sea un número valido en mi país, pero sucede que cuando el cliente pone 7 números, la alerta que aparece es que se selecciona el cuadro del input en rojo, quisiera que de le dejara un mensaje tipo, te hacen falta numeros para poner tu número correcto, o tú número debe de contener 10 dígitos

1 Like
2

¡Hola! Esto se puede hacer con un pequeño script personalizado. Te explico:

Paso 1 — Crear el mensaje de error oculto

  1. Arrastrá un elemento Headline debajo del campo del teléfono.

  2. Escribí el texto: “Tu número debe contener 10 dígitos” y ponelo en rojo (queda muy bien con #dc2626).

  3. En la sección Visibility, desactivá los tres íconos (desktop, tablet, mobile) para que los clientes no lo vean al cargar la página.

  4. Activá “Keep on the editor?” para seguir viéndolo mientras editás.

  5. Hacé clic en el botón .CSS arriba del panel y agregá la clase: phone-error-msg

Paso 2 — Agregar el código

Abre la sección Custom CSS / JS, ve a la pestaña Body HTML y pega el siguiente código:

<script>
(function() {
  function initPhoneValidation() {
    var phoneInput = document.querySelector('input[name="phone"]');
    var errorMsg = document.querySelector('.phone-error-msg');

    if (!phoneInput || !errorMsg) {
      setTimeout(initPhoneValidation, 300);
      return;
    }

    // Force hidden on the live page
    errorMsg.style.display = 'none';

    function validatePhone() {
      var digits = phoneInput.value.replace(/\D/g, '');

      if (digits.length > 0 && digits.length < 10) {
        errorMsg.style.display = 'block';
        errorMsg.textContent = 'Te faltan ' + (10 - digits.length) + ' dígitos. Tu número debe contener 10 dígitos.';
      } else if (digits.length > 10) {
        errorMsg.style.display = 'block';
        errorMsg.textContent = 'Tu número debe contener exactamente 10 dígitos.';
      } else {
        errorMsg.style.display = 'none';
      }
    }

    phoneInput.addEventListener('input', validatePhone);
    phoneInput.addEventListener('blur', validatePhone);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initPhoneValidation);
  } else {
    initPhoneValidation();
  }
})();
</script>

El script revisa cada vez que el cliente escribe en el campo del teléfono, cuenta solo los dígitos (ignora espacios o guiones), y le muestra cuántos números le faltan. Cuando llega a 10 exactos, el mensaje desaparece automáticamente.

Cualquier duda o si tienes algún problema al implementarlo, no dudes en avisarnos. ¡Estamos para ayudarte! :raising_hands:

1 Like
Urgente: campo de telefono quiero que los clientes puedan ingresar solo 10 numeros
3

Ya lo hice, aparece el mensaje, pero se desaparece el checkout para completar el número, y seguir con el proceso de compra

4

¡Hola! Qué raro que esté pasando eso — el script no debería afectar el resto del checkout, solo mostrar/ocultar el mensaje de error.

Para poder ayudarte mejor, ¿podrías compartirnos lo siguiente?

  1. El enlace (URL) de la página de checkout donde estás viendo el problema.
  2. Una captura de pantalla mostrando cómo se ve el checkout cuando desaparece.
  3. Una captura del código que pegaste en la sección Body HTML (para verificar que esté completo).

Con esa información podremos revisar qué está ocurriendo y darte una solución. ¡Gracias! :raising_hands: