Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

170
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!