Formik + Yup number validation

Question

Hello I am trying to use Formik + Yup to validate my form. I am stuck with validating the number for the date, but touching any field keeps crashing the app after I add the number field. How do I properly validate the min and max of a number with Yup?

See my codesandbox: https://codesandbox.io/s/ly027lklq7

If you comment out the whole day date field, the app runs as normal.

score 1 · Accepted Answer · answered May 09 '19 at 09:59

1

Lack of object validation before accessing nested items in touched is causing the issue.

Eg:

...
props.errors.address && props.errors.address.line1 && props.touched.address.line1
...
...
props.errors.dob && props.errors.dob.day && props.touched.dob.day
...

should be,

...
props.errors.address && props.errors.address.line1 && props.touched.address && props.touched.address.line1
...
...
props.errors.dob && props.errors.dob.day && props.touched.dob && props.touched.dob.day
...

Existing validation is working fine.

fixed code in codesandbox: https://codesandbox.io/s/2omxr4jopp

answered May 09 '19 at 09:59

Dani Vijay

2,188
2
22
37

Thanks man! Seems a bit verbose to have to check all those values every time, but glad we got something working! – douglasrcjames May 09 '19 at 17:11
Refer this : https://stackoverflow.com/questions/2631001/test-for-existence-of-nested-javascript-object-key – Dani Vijay May 10 '19 at 06:05

Formik + Yup number validation

1 Answers1