I am facing an issue with validating a form using yup. The problem arises when I attempt to iterate over the errors thrown by yup, as I discovered that the last field I enter does not get validated:
const schema = yup.object().shape({
age: yup.number().required("age is required"),
name: yup.string().required("name is required"),
email : yup.string().required("email is required"),
});
try{
schema.validateSync({form}, {abortEarly: false})
}catch(e:any){
let err = {
age : '',
name : '',
email : '',
}
e.inner.forEach(error => {
err[error.path] = error.message
})
}
console.log(err)
For instance, when I input the name and age first, I receive an error stating that the email is not valid even though it is filled in:
let form = {
age : '32', // filled first
name : 'mike', // filled second
email : '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2327252b0e2a2b38602d2123">[email protected]</a>', // filled last
}
The resulting error object shows:
err = {
age : '',
name : '',
email : 'email is required',
}
A similar issue occurs with the name field if I fill in age and email, where generally the last field will not be properly validated. Are there any solutions to this problem?