38

I have the following yup check:

nrOfApples: yup.number().min(0).max(999),

And right now if I leave the field blank, it validates as false. Is there any way to make yup.number() accept empty values? I have tried:

yup.number().nullable()

But it doesn't seem to work. Any ideas on how I can make such thing happen?

manzk
  • 586
  • 1
  • 4
  • 11

1 Answers1

65

You have to pass true to nullable -

nrOfApples: yup.number().min(0).max(999).nullable(true);

From: https://github.com/jquense/yup/issues/500

Working example: https://runkit.com/xdumaine/5f2816c75a0ba5001aa312b2

Note that if you add required().nullable(true) the required overrides the nullable and null will not validate.

Update:

You can use a transform to convert the NaN value into null. I updated the runkit with this:

const contactSchema = yup.object({
  name: yup.string()
    .required(),
  nrOfApples: yup
    .number()
    .min(0)
    .max(999)
    .nullable(true)
    // checking self-equality works for NaN, transforming it to null
    .transform((_, val) => val === Number(val) ? val : null) 
})
xdumaine
  • 10,096
  • 6
  • 62
  • 103
  • 3
    Hi @xdumaine, thanks for your response. However, when the field is left as empty, the value that it returns is NaN instead of null, so .nullable(true) is not working in this case. – manzk Aug 03 '20 at 14:15
  • 3
    The suggested solution did not work for me but thankfully the runkit link provided contained a change. I will suggest an edit but just in case swap the transform function call to the following ```.transform((_, val) => val ? Number(val) : null)``` – LethalMaus Feb 11 '22 at 09:53
  • @xdumaine Thanks for amazing answer, very comman to come this situation but very challaging with Yup library to validate number fields. – dipenparmar12 Oct 20 '22 at 17:18