Validaciones

Zelta Forms ofrece un sistema de validación robusto que garantiza la calidad de los datos capturados. Desde reglas simples como campos obligatorios hasta patrones complejos con expresiones regulares, cada campo puede configurarse con precisión.

Reglas de validación básicas

Campo obligatorio

La regla más fundamental. Impide que el formulario se envíe si el campo está vacío.

1. Selecciona el campo.
2. En el panel derecho, activa Obligatorio.
3. Personaliza el mensaje de error:

Mensaje predeterminado: "Este campo es obligatorio."
Mensaje personalizado: "Por favor, ingresa tu nombre completo."

Longitud de texto

Controla la cantidad de caracteres permitidos:

Regla	Configuración	Ejemplo
Longitud mínima	min_length: 3	Mínimo 3 caracteres
Longitud máxima	max_length: 500	Máximo 500 caracteres
Longitud exacta	exact_length: 13	Exactamente 13 caracteres (RFC)

Rango numérico

Para campos numéricos, define los valores permitidos:

campo: edad
validaciones:
  - tipo: rango
    min: 18
    max: 120
    mensaje: "La edad debe estar entre 18 y 120 años."

Patrones (expresiones regulares)

Valida el formato de los datos con expresiones regulares personalizadas.

Patrones comunes predefinidos

Patrón	Regex	Uso
Correo electrónico	^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$	Dirección de email
Teléfono MX	^\+?52\s?\d{2}\s?\d{4}\s?\d{4}$	Teléfono mexicano
RFC	^[A-ZÑ&]{3,4}\d{6}[A-Z0-9]{3}$	RFC mexicano
CURP	^[A-Z]{4}\d{6}[HM][A-Z]{5}[A-Z0-9]\d$	CURP mexicano
Código postal	^\d{5}$	Código postal México
Solo letras	^[a-zA-ZáéíóúÁÉÍÓÚñÑ\s]+$	Nombres sin números
Alfanumérico	^[a-zA-Z0-9]+$	Códigos y referencias

Configurar un patrón personalizado

1. Selecciona el campo.
2. Ve a Validaciones > Patrón personalizado.
3. Ingresa la expresión regular.
4. Define el mensaje de error descriptivo.

campo: clave_producto
validaciones:
  - tipo: patron
    regex: "^PROD-[A-Z]{2}-\\d{4}$"
    mensaje: "La clave debe seguir el formato PROD-XX-0000 (ej. PROD-MX-0123)."

Consejo

Siempre incluye un ejemplo del formato correcto en el mensaje de error. Esto reduce significativamente los errores del usuario.

Reglas personalizadas

Para validaciones que van más allá de patrones simples, usa reglas personalizadas con JavaScript.

Crear una regla personalizada

// Validar que la fecha de inicio sea anterior a la fecha de fin
function validar(valor, campos) {
  const inicio = new Date(campos.fecha_inicio);
  const fin = new Date(campos.fecha_fin);

  if (inicio >= fin) {
    return {
      valido: false,
      mensaje: "La fecha de inicio debe ser anterior a la fecha de fin."
    };
  }

  return { valido: true };
}

Validación cruzada entre campos

Las reglas personalizadas tienen acceso a todos los campos del formulario, lo que permite validaciones cruzadas:

// Validar que el total coincida con la suma de subtotales
function validar(valor, campos) {
  const suma = campos.subtotal_1 + campos.subtotal_2 + campos.subtotal_3;

  if (Number(valor) !== suma) {
    return {
      valido: false,
      mensaje: `El total debe ser ${suma} (suma de los subtotales).`
    };
  }

  return { valido: true };
}

Atención

Las reglas personalizadas se ejecutan tanto en el navegador (validación en tiempo real) como en el servidor (validación final). Asegúrate de que tu código sea compatible con ambos entornos.

Mensajes de error

Personalización por campo

Cada regla de validación puede tener su propio mensaje de error:

Regla	Mensaje predeterminado	Ejemplo personalizado
Obligatorio	"Este campo es obligatorio."	"Necesitamos tu email para contactarte."
Longitud mínima	"Mínimo {n} caracteres."	"Tu respuesta debe tener al menos 50 caracteres."
Patrón	"El formato no es válido."	"Ingresa un RFC válido (ej. XAXX010101000)."
Rango	"El valor está fuera del rango."	"Selecciona un número entre 1 y 10."

Posición del mensaje

Configura dónde aparecen los mensajes de error:

• Debajo del campo: Posición estándar, inmediatamente bajo el input.
• Tooltip: Aparece como una burbuja emergente al enfocar el campo.
• Resumen superior: Lista de todos los errores al inicio del formulario.

Estilo visual del error

• Color del borde: El campo se resalta con un borde rojo (personalizable).
• Icono de error: Se muestra un icono de advertencia junto al campo.
• Animación: Sacudida sutil del campo para llamar la atención.

Validación en tiempo real

Por defecto, las validaciones se ejecutan en tiempo real mientras el usuario escribe. Puedes configurar el momento de validación:

Modo	Comportamiento
Al escribir (on_input)	Valida con cada tecla presionada (con debounce de 300ms).
Al salir del campo (on_blur)	Valida cuando el usuario sale del campo.
Al enviar (on_submit)	Valida solo al intentar enviar el formulario.

Recomendación

Para una mejor experiencia de usuario, usa on_blur para la mayoría de los campos y on_input solo para campos con formato estricto (como teléfono o RFC).

Validaciones a nivel de formulario

Además de las validaciones por campo, puedes agregar reglas que apliquen al formulario completo:

• Límite de respuestas: Cierra el formulario después de N respuestas.
• Fecha de expiración: Desactiva el formulario en una fecha específica.
• Una respuesta por persona: Usa email o IP para evitar respuestas duplicadas.
• CAPTCHA: Protege contra envíos automatizados con reCAPTCHA o hCaptcha.