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?

Esquiline

I think your otherwise might be the one causing you problems, try adding .nullable() to that one. – Hagi

.typeError('The field should be a number') did the job for me. – Ebberta

price: Yup.number().required().typeError('add your message here') it works for me when cast from value NaN is comming. – Longtin

Answer 1

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!')

Coprolalia

I now just set typeError(''), so no unwanted error is shown in my app – Deadly

If the input comes from a text box, with "" for the empty value, the required error never triggers. Solution here: https://mcmap.net/q/353733/-value-type-error-message-displaying-instead-of-required-error-message-on-empty-input-submission – Wedded

Answer 2

No need to use "typeError"

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

Ballon

Answer 3

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"),

Whitening

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. – Magdaleno

isNan check for "" empty string just change the condition for null and undefined .transform((value) => ((isNaN(value) || value === null || value === undifined)? 0 : value)) – Whitening

Answer 4

You can use:

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

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

Endmost

Answer 5

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()
}),

Enemy

Answer 6

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.

Hast

The problem is with the typecasting, the solution here fix it github.com/jquense/yup/issues/500#issuecomment-818582829 – Appleby