I have several fields that are required if a single condition is true. Is there a better way to condense this code to avoid repeating the when for all of these fields?

const requiredForDiffAddress = {
    is: false,
    then: Yup.string().required()
};

export const BillingAddressYupValidationSchemaShape = {
  useShippingAddress: Yup.boolean().default(true).required(),
  street: Yup.string()
      .when('useShippingAddress', requiredForDiffAddress),
  city: Yup.string()
      .when('useShippingAddress', requiredForDiffAddress),
  state: Yup.string()
      .when('useShippingAddress', requiredForDiffAddress),
  zipCode: Yup.string()
      .when('useShippingAddress', requiredForDiffAddress),
};

Or for a more realistic and involved sample

const buildRequiredForDiffAddress = requiredText => ({
    is: false,
    then: Yup.string().required(requiredText)
});

export const BillingAddressYupValidationSchemaShape = {
  useShippingAddress: Yup.boolean().default(true).required(),
  street1: Yup.string().when('useShippingAddress', 
      buildRequiredForDiffAddress("How will we know where to send your order?")),
  city: Yup.string().when('useShippingAddress', 
    buildRequiredForDiffAddress("What city do you live in?")),
  state: Yup.string().when('useShippingAddress',
    buildRequiredForDiffAddress("State please!")),
  zipCode: Yup.string().when('useShippingAddress', 
      buildRequiredForDiffAddress("Zip Code please!")),
};

I have several fields that are required if a single condition is true. Is there a better way to condense this code to avoid repeating the when for all of these fields?

const requiredForDiffAddress = {
    is: false,
    then: Yup.string().required()
};

export const BillingAddressYupValidationSchemaShape = {
  useShippingAddress: Yup.boolean().default(true).required(),
  street: Yup.string()
      .when('useShippingAddress', requiredForDiffAddress),
  city: Yup.string()
      .when('useShippingAddress', requiredForDiffAddress),
  state: Yup.string()
      .when('useShippingAddress', requiredForDiffAddress),
  zipCode: Yup.string()
      .when('useShippingAddress', requiredForDiffAddress),
};

Or for a more realistic and involved sample

const buildRequiredForDiffAddress = requiredText => ({
    is: false,
    then: Yup.string().required(requiredText)
});

export const BillingAddressYupValidationSchemaShape = {
  useShippingAddress: Yup.boolean().default(true).required(),
  street1: Yup.string().when('useShippingAddress', 
      buildRequiredForDiffAddress("How will we know where to send your order?")),
  city: Yup.string().when('useShippingAddress', 
    buildRequiredForDiffAddress("What city do you live in?")),
  state: Yup.string().when('useShippingAddress',
    buildRequiredForDiffAddress("State please!")),
  zipCode: Yup.string().when('useShippingAddress', 
      buildRequiredForDiffAddress("Zip Code please!")),
};

• javascript
• validation
• yup

• That's a nice demonstration on why one should prefer just normal functions over chained methods: the former pose. – zerkms Commented Nov 19, 2018 at 23:35
• I think it's fine to have chained methods, you just need to be able to chain things directly, so something like useShippingAddress: Yup.boolean().default(true).when(false, requiredAddressFieldsSchema) – Snekse Commented Nov 19, 2018 at 23:40
• It's fine, but then you have problems like you have now – zerkms Commented Nov 19, 2018 at 23:42
• @zerkms Thanks for your ment. It made me think about a more realistic example which makes things even more painful. – Snekse Commented Nov 19, 2018 at 23:51

1 Answer 1

TL;DR: The solution posted in the question is probably the best way to handle fields that are required only when a condition is met based off the value of some other field*

Extended Answer

I've looked at this quite a bit after messaging the creator of Yup.

He suggested

extend mixed with a requiredIf method to encapsulate this sort of thing

I looked into what would be involved with that along with using some form of lazy. The extension route seemed to be better than the lazy route, but in the end, I feel like what I have is probably the best solution.

I created this fairly detailed CodeSandbox is someone wants to take a stab and find a better solution. I'll gladly change the accepted answer for this.

https://codesandbox.io/s/xk4r7nq9z

* ...and you want custom error messaging per field. It seems as if you are okay w/ the default messaging, then the example posted may not be the simplest solution.