Validación

DYONA Form tiene tres mecanismos de validación relacionados pero diferentes:

1. required, una propiedad directa del field.
2. validations, un arreglo de reglas declarativas.
3. Validación integrada para tipos de field particulares: type: 'email' y type: 'password' con passwordRules.

Probalo en vivo

¿Querés ver estas reglas de validación funcionando?

Abrir Validación en el Lab →

required

Configurá required: true para hacer obligatorio un field:

{
  name: 'username',
  label: 'Nombre de usuario',
  type: 'text',
  required: true
}

El equivalente declarativo es {type: 'required'} dentro de validations. Esta forma puede personalizar el error con message:

{
  name: 'username',
  label: 'Nombre de usuario',
  type: 'text',
  validations: [{type: 'required', message: 'Elegí un nombre de usuario.'}]
}

Si un field obligatorio está vacío, el formulario no se envía.

validations

validations es un DyonaFieldValidation[] opcional:

validations?: DyonaFieldValidation[]

Cada entrada tiene estos parámetros:

{
  type: '...',
  value: ...,
  message: '...'
}

• type selecciona la regla.
• value aporta el límite o patrón cuando la regla lo necesita.
• message es opcional y reemplaza el mensaje predeterminado de DYONA Form para esa regla.

Se pueden declarar varias reglas juntas:

validations: [
  {type: 'minLength', value: 4},
  {type: 'maxLength', value: 24}
]

min

min es válido solo para type: 'number'. Define el menor valor numérico permitido y value debe ser un número finito.

{
  name: 'employeeCount',
  label: 'Empleados',
  type: 'number',
  validations: [
    {type: 'min', value: 1}
  ]
}

Los valores menores al mínimo configurado producen un error de validación.

max

max es válido solo para type: 'number'. Define el mayor valor permitido y value debe ser numérico.

{
  name: 'employeeCount',
  label: 'Empleados',
  type: 'number',
  validations: [
    {type: 'max', value: 500}
  ]
}

Los valores mayores al máximo configurado producen un error de validación.

minLength

minLength define la cantidad mínima de caracteres. Es válido solo para fields text, textarea, email y password. Su value debe ser un entero mayor o igual a 0.

{type: 'minLength', value: 4}

maxLength

maxLength define la cantidad máxima de caracteres. Es válido solo para fields text, textarea, email y password, y su value debe ser un entero mayor o igual a 0.

{type: 'maxLength', value: 24}

regex

regex valida el valor mediante una expresión regular. Es válido solo para fields text, textarea, email y password. Su value debe ser un string no vacío que represente una RegExp válida.

{
  name: 'username',
  label: 'Nombre de usuario',
  type: 'text',
  validations: [
    {type: 'regex', value: '^[a-z0-9.]+$'}
  ]
}

message

message?: string es una propiedad opcional de una validación declarativa:

validations: [
  {
    type: 'minLength',
    value: 4,
    message: 'El nombre de usuario debe tener al menos 4 caracteres.'
  }
]

message es opcional. Si contiene texto válido, reemplaza el mensaje predeterminado generado por DYONA Form para esa regla. Si está vacío o contiene solamente espacios, DYONA Form usa el mensaje predeterminado. Su contenido pertenece a la aplicación consumidora, que es responsable de localizarlo.

Validación de email

email no es un DyonaFieldValidationType. La validación del formato de email ocurre automáticamente cuando un field usa type: 'email':

{
  name: 'email',
  label: 'Email',
  type: 'email',
  required: true
}

DYONA Form valida el formato del email cuando el field contiene un valor.

Validación de password

passwordRules no pertenece al arreglo validations. Configuralo directamente en un field type: 'password':

passwordRules: {
  minLength?: number,
  requireUppercase?: boolean,
  requireLowercase?: boolean,
  requireNumber?: boolean,
  requireSymbol?: boolean
}

• minLength define la longitud mínima del password y debe ser un entero positivo mayor que 0.
• requireUppercase es boolean y, cuando es true, exige al menos una letra mayúscula.
• requireLowercase es boolean y, cuando es true, exige al menos una letra minúscula.
• requireNumber es boolean y, cuando es true, exige al menos un número.
• requireSymbol es boolean y, cuando es true, exige al menos un símbolo.

{
  name: 'password',
  label: 'Contraseña',
  type: 'password',
  required: true,
  passwordRules: {
    minLength: 8,
    requireUppercase: true,
    requireLowercase: true,
    requireNumber: true,
    requireSymbol: true
  },
  showPasswordRules: true
}

showPasswordRules es boolean. Cuando es true, muestra visualmente al usuario las reglas de password configuradas.

Fields opcionales

Cuando un field no es required y está vacío, DYONA Form no ejecuta sus validaciones de contenido. Por ejemplo, un email opcional vacío es válido; si contiene un valor, se valida su formato de email.

Comportamiento de errores

Cuando una validación falla, DYONA Form muestra el error debajo del field. La tab correspondiente refleja sus errores y existe un resumen global navegable. Al intentar guardar, DYONA Form navega y enfoca el primer field inválido.

Obligatorio condicional

requiredWhen hace obligatorio un field según el valor de otro field:

{
  name: 'taxId',
  label: 'CUIT',
  type: 'text',
  requiredWhen: {
    field: 'accountType',
    operator: 'equals',
    value: 'business'
  }
}

La documentación completa de condiciones se cubre en su propia sección.

Ejemplo completo

import {DyonaForm, type DyonaFormSchema} from '@typhonsoftware/dyona-form';

const schema: DyonaFormSchema = {
  title: 'Crear cuenta',
  hideSingleTab: true,
  tabs: [{
    id: 'account',
    title: 'Cuenta',
    rows: [
      {columns: [
        {
          name: 'username', label: 'Nombre de usuario', type: 'text', required: true,
          validations: [{type: 'minLength', value: 4}]
        },
        {name: 'email', label: 'Email', type: 'email', required: true}
      ]},
      {columns: [
        {
          name: 'password', label: 'Contraseña', type: 'password', required: true,
          passwordRules: {
            minLength: 8, requireUppercase: true, requireLowercase: true,
            requireNumber: true, requireSymbol: true
          },
          showPasswordRules: true
        },
        {
          name: 'employeeCount', label: 'Empleados', type: 'number',
          validations: [{type: 'min', value: 1}, {type: 'max', value: 500}]
        }
      ]}
    ]
  }]
};

export function AccountForm() {
  return <DyonaForm locale="es" schema={schema} />;
}