Estoy trabajando en un proyecto con un formulario de registro largo hecho con MUI, formularios de gancho de reacción y sí. Habría un campo representado a la vez con un botón "Siguiente" para cambiar el campo de entrada mostrado al siguiente (es decir, pasar del campo de correo electrónico al campo de nombre). En este momento no me permite enviar el campo de correo electrónico y mostrar el campo de nombre porque quiere validar ambos ya que no hay validación condicional. Tengo el siguiente esquema:
const schema = yup.object().shape({ email: yup.string().email().required(), firstName: yup.string().required("Please enter your first name"), });Por lo que he leído en línea, entiendo que necesito usar el método .when para el campo firstName, excepto que no sé cómo verificar si el campo de correo electrónico es válido. He probado lo siguiente:
const schema = yup.object().shape({ email: yup.string().email().required(), firstName: yup.string().when("email", { is: (value) => value !== undefined, then: yup.string().required("Please enter your first name"), otherwise: yup.string().notRequired(), }), });Pero el valor se define en Cambiar, por lo que no funciona.
Me lo imaginé. He dividido el esquema principal en un emailSchema y un nameSchema, y luego utilicé el método concat basado en el paso del registro (siendo 1 el paso con el primer campo de nombre).
const schema = step === 1 ? emailSchema.concat(nameSchema) : emailSchema