Yup.when: "`NaN` (cast from the value `NaN`)"

Question

I'm trying to implement a quite basic validation for a form field/select. Validation schema:

vehicleProvider: Yup.object() // This is an object which is null by default
    .required('formvalidation.required.message')
    .nullable(), 
reserveVehicle: Yup.number().when('vehicleProvider', { // This is a number which is null by default
    is: provider => provider?.hasReserve,
    then: Yup.number()
        .required('formvalidation.required.message')
        .nullable(),
    otherwise: Yup.number().notRequired()
}),

What I want to do: Only require/validate reserveVehicle if provider.hasReserve is true. Otherwise, don't require the number. I get this error:

"reserveVehicle must be a number type, but the final value was: NaN (cast from the value NaN)."

This makes sense (kind of) because, well null is Not a number. But as I'm trying to tell it that it shouldn't be required, in my opinion it shouldn't try to evaluate it.

Did I miss any key concepts of Yup?

I think your `otherwise` might be the one causing you problems, try adding `.nullable()` to that one. — Thismatters, Dec 27 '19 at 20:01
.typeError('The field should be a number') did the job for me. — Ukesh Shrestha, Jun 08 '22 at 10:47
`price: Yup.number().required().typeError('add your message here')` it works for me when cast from value NaN is comming. — Julfikar Haidar, Dec 27 '22 at 17:01

Gaurav · Answer 1 · 2020-01-07T21:40:56.923

95

You should use typeError

Here is an example from my code:

amount: Yup.number()
                    .typeError('Amount must be a number')
                    .required("Please provide plan cost.")
                    .min(0, "Too little")
                    .max(5000, 'Very costly!')

edited Jan 07 '20 at 21:40

answered Jan 06 '20 at 17:37

Gaurav

1,668
1
13
30

2

I now just set typeError(''), so no unwanted error is shown in my app – Thomas Jul 26 '21 at 08:09

score 13 · Answer 2 · answered Mar 29 '23 at 03:02

13

No need to use "typeError"

yup.number()
    .transform((value) => Number.isNaN(value) ? null : value )
    .nullable()
    .required('Required'),

answered Mar 29 '23 at 03:02

baggy

171
1
3

AbdulmateenChitrali · Answer 3 · 2022-12-01T09:27:03.037

9

Use this piece of code .transform((value) => (isNaN(value) ? 0 : value))

age: yup
.number()
.transform((value) => (isNaN(value) || value === null || value === undefined) ? 0 : value)
.required()
.label("Age"),

edited Dec 01 '22 at 09:27

answered Oct 12 '22 at 18:27

AbdulmateenChitrali

333
3
9

This solution can still display a message at the same time compared to just returning an empty typeError(''). You can return null of there is no value instead of 0, make it nullable, and you can display a required error message. – mcometa Nov 30 '22 at 12:05
isNan check for "" empty string just change the condition for null and undefined .transform((value) => ((isNaN(value) || value === null || value === undifined)? 0 : value)) – AbdulmateenChitrali Dec 01 '22 at 04:53

score 2 · Answer 4 · answered Sep 11 '22 at 08:43

2

You can use:

amount: yup.number().typeError("")

This will omit the validation message, but you should be careful when doing this.

answered Sep 11 '22 at 08:43

Mahmoud Abd AL Kareem

615
2
10
23

score 0 · Answer 5 · answered Nov 09 '22 at 03:34

add typeError in when

vehicleProvider: Yup.object() // This is an object which is null by default
    .required('formvalidation.required.message')
    .nullable(), 
reserveVehicle: Yup.number().when('vehicleProvider', { // This is a number which is null by default
    is: provider => provider?.hasReserve,
    then: Yup.number()
        .typeError('Amount must be a number')
        .required('formvalidation.required.message')
        .nullable(),
    otherwise: Yup
        .number()
        .typeError('Amount must be a number')
        .notRequired()
}),

score -3 · Answer 6 · answered Apr 12 '21 at 18:24

-3

Since you want the field to still validate when the value is NaN and it's not a required field, changing your otherwise to this should fix it:

otherwise: Yup.number().notRequired().nullable()

Adding the .nullable() at the end is the key.

answered Apr 12 '21 at 18:24

storm143

84
8

The problem is with the typecasting, the solution here fix it https://github.com/jquense/yup/issues/500#issuecomment-818582829 – Ian Mutawa Apr 11 '22 at 20:15

Yup.when: "`NaN` (cast from the value `NaN`)"

6 Answers6