I’m a bit confused about how yup
is working.
I have the following schema to validate the register
export const registerValidationSchema = yup.object().shape({
first_name: yup.string().trim().required(),
last_name: yup.string().trim().required(),
date_of_birth: yup.string().required().test('DOB', 'You must be at least 18 to register', value => {
return value.setFullYear(value.getFullYear() + 18) < Date.now()
}),
email: yup.email().trim().required()
});
When the object to validate is the following
const data = {
email: "[email protected]"
}
The validation will crash because value
is undefined and the function value.setFullYear
will fail. But why? I assume that yup will stop this line on .required()
part and go to the next property.
I know the issue can be fixed by adding if(!value) return false;
inside .test()
but what’s the point of the required function?
From the yup documentation:
string.required(message?: string | function): Schema
The same as the mixed() schema required, except that empty strings are also considered ‘missing’ values.
mixed.required(message?: string | function): Schema
Mark the schema as required, which will not allow undefined or null as a value. Note that unless a schema is marked as nullable() a null value is treated as a type error, not a missing value. Mark a schema as mixed().nullable().required() treat null as missing.
So I read this as an undefined
, null
or ''
value should fail on the .required()
rule.