Cómo crear formularios con validación de RUT chileno en minutos

¡Hola, marketer! Si estás aquí, es porque probablemente te has encontrado con un gran desafío: necesitas validar el RUT chileno en un formulario de HubSpot y no tienes idea de por dónde empezar. Tranquilo, no estás solo. Este es un dolor muy común para las empresas en Chile, donde el RUT es un dato obligatorio para muchas operaciones. Lo bueno es que estoy aquí para explicártelo con manzanitas 🍏🍏🍏.

Al final de este tutorial, tendrás un formulario de HubSpot que valida y formatea correctamente el RUT de tus clientes (ya sean personas o empresas). Además, cumplirá con las normativas legales y te ahorrarás dolores de cabeza.

¿Por qué validar el RUT en un formulario?

El RUT es esencial en Chile para identificar a personas y empresas. Sin una validación adecuada, podrías recibir datos erróneos o incompletos, lo que afecta procesos como:

• Facturación electrónica.
• Registro de clientes.
• Cumplimiento de normativas legales.

Además, una buena validación mejora la experiencia del usuario al evitar que ingresen datos incorrectos. ¡Un cliente feliz siempre vuelve! 😉

Configuración del formulario en HubSpot

Antes de entrar en el código, necesitamos preparar el formulario en HubSpot. Sigue estos pasos:

1. Ve a Marketing > Formularios en tu portal de HubSpot.
2. Crea un nuevo formulario o edita uno existente.
3. Añade los campos necesarios, como:
   • Nombre
   • Correo Electrónico
   • Teléfono
   • RUT (propiedad personalizada de texto).
   Tip: Si estás trabajando con empresas, llama al campo «RUT Empresa». Si es para personas, simplemente «RUT».
4. Guarda y publica tu formulario.

Código para validar y formatear el RUT

Ahora viene la parte técnica. Este es el código que necesitas para validar y formatear el RUT directamente en tu sitio web.

Función para validar el RUT

Esta función limpia el RUT, calcula el dígito verificador (DV) y lo compara con el ingresado. Es el núcleo de la validación:

function validateRut(rut) {
  let cleanRut = rut.replace(/[^\dKk]/g, ''); // Limpia caracteres no válidos
  let body = cleanRut.slice(0, -1); // Parte numérica
  let dv = cleanRut.slice(-1).toUpperCase(); // Dígito verificador

  if (body.length < 7 || body.length > 8) {
    return false; // Longitud no válida
  }

  let sum = 0;
  let multiplier = 2;
  for (let i = body.length - 1; i >= 0; i--) {
    sum += parseInt(body[i]) * multiplier;
    multiplier = multiplier === 7 ? 2 : multiplier + 1; // Cicla entre 2 y 7
  }
  let mod = 11 - (sum % 11);
  let expectedDv = mod === 11 ? '0' : mod === 10 ? 'K' : mod.toString();

  return expectedDv === dv; // Verifica si el DV coincide
}

Función para formatear el RUT

Esta función convierte un RUT como 12345678K en un formato más legible: 12.345.678-K.

function formatRut(rut) {
  let cleanRut = rut.replace(/[^\dKk]/g, ''); // Limpia caracteres no válidos
  let formattedRut = cleanRut.slice(-4, -1) + '-' + cleanRut.substr(cleanRut.length - 1); // Agrega DV
  for (let i = 4; i < cleanRut.length; i += 3) {
    formattedRut = cleanRut.slice(-3 - i, -i) + '.' + formattedRut; // Puntos cada 3 dígitos
  }
  return formattedRut;
}

Integración con el formulario de HubSpot

Este script valida el RUT en tiempo real y muestra mensajes de error si no es válido.

hbspt.forms.create({
  region: "na1",
  portalId: "TUPORTALID",
  formId: "TUFORMID",
  onFormReady: function($form) {
    let CompanyRut = $form.find(".hs-rut input"); // Selecciona el campo RUT
    let submitButton = $form.find("input[type='submit']");

    // Deshabilitar el botón de envío al inicio
    submitButton.prop('disabled', true);

    // Validación en tiempo real
    CompanyRut.on('input', function() {
      let cleanRut = CompanyRut.val().replace(/[^\dKk]/g, ''); // Limpia el RUT
      let formattedRut = formatRut(cleanRut);
      CompanyRut.val(formattedRut);

      // Validar el RUT
      if (!validateRut(cleanRut)) {
        submitButton.prop('disabled', true);
        CompanyRut.closest('.input').find('ul.hs-error-msgs').remove(); // Elimina mensajes previos
        CompanyRut.closest('.input').append('<ul class="no-list hs-error-msgs"><li><label>El RUT no es válido.</label></li></ul>');
      } else {
        submitButton.prop('disabled', false);
        CompanyRut.closest('.input').find('ul.hs-error-msgs').remove(); // Limpia mensajes de error
      }
    });
  }
});

Cómo incrustar el formulario en tu sitio web

1. Copia el código de incrustación de HubSpot.
2. Añádelo a la página donde quieras que aparezca el formulario.
3. Incluye el código de validación y formateo del RUT (como el que te mostré arriba) debajo del script del formulario.

Pruebas y Consejos Finales

1. Prueba diferentes casos:
   • RUT válido: 12345678K → debería funcionar.
   • RUT inválido: 12345678L → debería mostrar un error.
2. Mensaje personalizado: Agrega mensajes claros y amigables para los usuarios.
3. Mantenimiento: Si cambias algo en el formulario, verifica que las validaciones sigan funcionando correctamente.

---

¡Y listo! Ahora tienes un formulario de HubSpot que valida el RUT de tus usuarios, ya sean personas o empresas. Esto no solo cumple con normativas legales, sino que también mejora la calidad de los datos que capturas.

Si tienes dudas o necesitas ayuda con integraciones avanzadas de HubSpot, no dudes en contactar a Efeonce. ¡Estamos aquí para empoderar tu crecimiento! 🚀