Formik : Require validation only if the field is visible - reactjs

Question

I have a form including a checkbox which if it is true causes a new field to appear.
and I would like that when the field is visible it can be considered as Required and no required if it is invisible.
Here endComment should be required only when show is true
Would you have a solution ?
The global code :
const Form = {
const [show, setShow] = useState<boolean>(props.event.endDate ? true : false);
const addEndComment = (value: boolean) => {
setShow(value);
};
const schema = yup.object().shape({
comment: yup.string().required(),
endComment: yup.string().required(),
});
return (
<>
<Formik
enableReinitialize
initialValues={{
comment: props.event.comment,
endComment: props.event.endComment,
}}
onSubmit={(values) => {
....
}}
validationSchema={schema}
>
{(formikProps) => (
<form onSubmit={formikProps.handleSubmit}>
<section>
<p>
<I18nWrapper
translateKey={'event.form-create-event.explanations'}
/>
</p>
</section>
<section>
<Form.Group controlId="eventComment">
<Form.Label>
<I18nWrapper
translateKey={'event.form-create-event.comment-label'}
/>
</Form.Label>
<Form.Control
value={formikProps.values.comment || ''}
onChange={formikProps.handleChange}
as="textarea"
rows={3}
name="comment"
isInvalid={!!formikProps.errors.comment}
/>
<Form.Control.Feedback
type="invalid"
role="alert"
aria-label="no comment"
>
<FontAwesomeIcon icon={faTimes} className="me-2" size="lg"/>
<I18nWrapper
translateKey={'reminder.modal.phone-reminder.error'}
/>
</Form.Control.Feedback>
</Form.Group>
</section>
<section>
<SimpleGrid columns={columns} rows={rows}/>
</section>
<section>
<Form.Group controlId="formBasicCheckbox">
<Form.Check
type="checkbox"
label={t('event.form-resolve-event.checkbox-label')}
checked={show}
onChange={(e) => addEndComment(e.target.checked)}
/>
</Form.Group>
</section>
{show ? (
<React.Fragment>
<section>
<I18nWrapper
translateKey={'event.form-resolve-event.comment-end-label'}
/>
<Form.Control
value={formikProps.values.endComment || ''}
onChange={formikProps.handleChange}
as="textarea"
rows={3}
name="endComment"
isInvalid={!!formikProps.errors.endComment}
/>
<Form.Control.Feedback
type="invalid"
role="alert"
aria-label="no comment"
>
<FontAwesomeIcon
icon={faTimes}
className="me-2"
size="lg"
/>
<I18nWrapper
translateKey={'reminder.modal.phone-reminder.error'}
/>
</Form.Control.Feedback>
</section>
</React.Fragment>
) : null}
<div className="text-center">
<GenericButton
label={'button'}
type="submit"
disabled={!formikProps.isValid}
/>
</div>
</form>
)}
</Formik>
</>
);
};
export default Form;

Answer 1

You can simply change the schema based on the show state
Example:
const schema = yup.object().shape({
comment: yup.string().required(),
endComment: show ? yup.string().required() : yup.string(),
});
OR
If you have the show state as a part of formik's state you can use formik's conditional validation, for example
const schema = yup.object().shape({
comment: yup.string().required(),
endComment: Yup.string().when('show', {
is: true,
then: Yup.string().required()
}),
});
Refer yup docs for more info