Reutilizando validaciones Yup en diferentes valores

05 Aug, 2023 Programación 0

Tengo un formulario que requiere validación, donde cada fila (con 4 elementos cada una) es opcional a menos que se complete al menos uno. Si bien esta validación funciona correctamente, lleva a mucha repetición, ya que tengo 5 filas, lo que equivale a casi 150 líneas de código repetido:

var1: Yup.date().when(['var2', 'var3', 'var4'], {
    is: (a: string, b: number, c: File) =>
        a !== undefined || b !== undefined || c !== undefined,
    then: Yup.date().required('Por favor complete var1'),
}),
var2: Yup.string().when(['var1', 'var3', 'var4'], {
    is: (a: Date, b: number, c: File) =>
        a !== undefined || b !== undefined || c !== undefined,
    then: Yup.string().required('Por favor complete var2'),
}),
var3: Yup.string().when(['var1', 'var2', 'var4'], {
    is: (a: Date, b: number, c: File) =>
        a !== undefined || b !== undefined || c !== undefined,
    then: Yup.string().required('Por favor complete var3'),
}),
var4: Yup.mixed()
    .when(['var1', 'var2', 'var3'], {
        is: (a: Date, b: string, c: number) =>
            a !== undefined || b !== undefined || c !== undefined,
        then: Yup.mixed().required('Por favor complete var4'),
})

//Aquí comienza la repetición

var5: Yup.date().when(['var6', 'var7', 'var8'], {
    is: (a: string, b: number, c: File) =>
        a !== undefined || b !== undefined || c !== undefined,
    then: Yup.date().required('Por favor complete var5'),
}),
var6: Yup.string().when(['var5', 'var7', 'var8'], {
    is: (a: Date, b: number, c: File) =>
        a !== undefined || b !== undefined || c !== undefined,
    then: Yup.string().required('Por favor complete var6'),
}),
var7: Yup.string().when(['var5', 'var6', 'var8'], {
    is: (a: Date, b: number, c: File) =>
        a !== undefined || b !== undefined || c !== undefined,
    then: Yup.string().required('Por favor complete var7'),
}),
var8: Yup.mixed()
    .when(['var5', 'var6', 'var7'], {
        is: (a: Date, b: string, c: number) =>
            a !== undefined || b !== undefined || c !== undefined,
        then: Yup.mixed().required('Por favor complete var8'),
})

¿Existe la posibilidad de reutilizar esos bloques, tal vez en una función y Yup.test, o estoy obligado a usar esos bloques?

davy.ai

August 5, 2023 at 3:12 am

Sí, existe la posibilidad de reutilizar esos bloques creando una función de validación reutilizable mediante el uso de Yup.test y pasando los nombres de los campos como parámetros a la función.

Aquí tienes un ejemplo de cómo podrías crear una función de validación reutilizable para el primer conjunto de campos:

const validateFields = (field1, field2, field3, field4) => {
  return Yup.mixed().test('isRequired', 'Por favor, completa al menos un campo', function(value) {
    const { parent } = this;
    const { [field1]: field1Value, [field2]: field2Value, [field3]: field3Value, [field4]: field4Value } = parent;

    const hasValue = field1Value || field2Value || field3Value || field4Value;
    const isCheckedAgainstFields = field1Value !== undefined || field2Value !== undefined || field3Value !== undefined || field4Value !== undefined;

    return !isCheckedAgainstFields || hasValue;
  });
}

// Ejemplo de uso:
var1: validateFields('var2', 'var3', 'var4', 'var5')
var2: Yup.string().when([...], {...})
var3: Yup.string().when([...], {...})
var4: Yup.mixed().when([...], {...})

// Reutilizando la función para el segundo conjunto de campos

var5: validateFields('var6', 'var7', 'var8', 'var9')
var6: Yup.string().when([...], {...})
var7: Yup.string().when([...], {...})
var8: Yup.mixed().when([...], {...})

Puedes seguir reutilizando esta función para cualquier conjunto adicional de campos que requieran la misma lógica de validación. Esto puede ayudar a reducir la repetición y hacer que tu código sea más mantenible.

es.davy.ai

¿Tienes una pregunta?

Reutilizando validaciones Yup en diferentes valores

Answer

davy.ai