Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

172
Visualizações
Reusing Yup-validations on different values

I have a form which needs validation where each row (with 4 elements each) is optional unless a single one is filled out. While this validation is all working it led to a lot of repitition since I have 5 rows, equalling almost 150 lines of repeating code:

    var1: Yup.date().when(['var2', 'var3', 'var4'], {
        is: (a: string, b: number, c: File) =>
            a !== undefined || b !== undefined || c !== undefined,
        then: Yup.date().required('Please fill out 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('Please fill out 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('Please fill out 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('Please fill out var4'),
    })

//Here the repition starts

var5: Yup.date().when(['var6', 'var7', 'var8'], {
        is: (a: string, b: number, c: File) =>
            a !== undefined || b !== undefined || c !== undefined,
        then: Yup.date().required('Please fill out 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('Please fill out 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('Please fill out 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('Please fill out var8'),
    })

Is there a possibility of reusing those blocks, maybe in a function and Yup.test or am I stuck with those blocks?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

You may refactor like the next code example:

    const checkCondition = (a: string, b: number, c: File) =>
        return a !== undefined || b !== undefined || c !== undefined;

then use a function:

      var5: Yup.date().when(['var6', 'var7', 'var8'], {
            is: checkCondition(a, b, c),
            then: Yup.date().required('Please fill out var5'),
        }),

All similar functions you may put to utils.tsx/.js file and just import/export.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda