Conditionally validating whole sections of a form? Which of 3 approaches?

[jsodeman]

I often have whole sub-sections of forms that are hidden using v-if based on the value of other fields. My understanding of conditional validation with VeeValidate is that VeeValidate doesn't take into account whether a field is visible, and you have to modify the schema itself to make it conditional.

For a few fields, using yup's .when() is easy to do or using a computed schema with some ternary-controlled validation setting. This would be inconvenient for a whole section of a form.

I can think of three options, and I'd like feedback or suggestions on which might be a better approach.

1. Use the chaining ability of yup .shape() to conditionally add in a section of schema in a computed.
2. Using yup .concat() to conditionally compose the schema in a computer.
3. Putting the whole conditional section of the form into a separate Vue component and having it pass its validation state back up to the parent form.

[jsodeman]

I ended up building up the schema using the spread operator and then creating the yup object from the result in a computed.

const searchSchema = computed(() => {
	let schema = {};

	if (searchParams.value.Type === "Individual") {
		schema = {
			...schema,
			First: yup.string().required().label("First Name"),
			Last: yup.string().required().label("Last Name"),
		};
	}

	if (searchParams.value.Type === "Business") {
		schema = {
			...schema,
			Business: yup.string().required().label("Business"),
		};
	}

	if (searchParams.value.Type === "Property") {
		schema = {
			...schema,
			Address: yup.string().required().label("Address"),
			State: yup.string().required().label("State"),
		};
	}

	return yup.object(schema);
});