reactjs - Yup: How to validate field only when it exists?

Question

Is it possible to validate a field only when it exists?

I'm going to create an application. A field(email) may / may not display on step 2, it depends on the step 1's selected option. The problem is that I can't put email: Yup.string().Required(), it causes that the validation run all the time even the field is not displayed.

Answer 1

You can set a additional boolean key where value is default false. Change it to true when you modify the value in step 1. And then if the value is true for that key then apply the validation.

Something like this.

    const initialSchema= {
      name: '',
      isEmail: false, // change this when you want to add validation
      email: '',
      phone: '',
    };
    
    const validationSchema = Yup.object().shape({
      name: Yup.string()
        .required('Enter Name')
      isEmail: Yup.boolean(),
      email: Yup.string().when('isEmail', {
         is: true,
         then: Yup.string()
         .required('Enter Email ID'),
         otherwise: Yup.string(),
      }),
      phone: Yup.string()
        .required('Enter Mobile No'),
    });

Here is the documentation reference for same.

Update:

Here is the working codesandbox. I've added checkbox with display:none;, and added the default state values in data context.