I'm using Yup to handle form validations in a project of mine and I have a question.
I need to have a custom UI in my form where if a field has been validated and the validation failed the border of that input text must be red, otherwise if a field has been validated and the validation passed the border of that input text must be green. I'm using the validateSync method of Yup and when the validation failed I can retrieve all the paths where the validation had failed from the inner array.
inner: in the case of aggregate errors, inner is an array of ValidationErrors throw earlier in the validation chain. When the abortEarly option is false this is where you can inspect each error thrown, alternatively, errors will have all of the messages from each inner error.
Here is my question, I have the following schema and the following form value:
const schema = yup.object().shape({
firstName: yup.string().required(),
lastName: yup.string().required(),
nickname: yup.string().optional(),
});
const form = { firstName: "Jane" };
When I validateSync this form I can get that the validation failed for lastName but I can't get that the validation passed for nickname. There is a way that allow me to have such information i.e. takes all the field of the schema that won't break the validation ?