How to check that a value is a number or change the default error message?

Hi,

I have the following schema defined.

const schema = yup.object().shape({
  name: yup.string()
    .required('name is required'),
  age: yup.number()
    .positive('age must be greater than zero')
    .required('age is required')
});

I am also using this with react-formal. When I enter a value for myNumber form field that is not a number, say ‘abc’, I get the following error message:

this (value: ``) must be a `number` type

I’d like to specify the error message to display when the value is not a number but adding an error message to the number method doesn’t seem to work. Is there a way to do this?

Thanks

[dannief]

I got it. I needed to call the typeError() function

const schema = yup.object().shape({
  name: yup.string()
    .required('name is required'),
  age: yup.number()
    .typeError('age must be a number')
    .positive('age must be greater than zero')
    .required('age is required')
});

See: https://tonicdev.com/dannief/572294ef4a2c861200c181e5

[derpycoder]

I found out 2 methods:

1. Not extremely strict: (Allows spaces in number input, if input type is text)

salary: yup.object({
    min: yup
        .number()
        .truncate()
        .positive("Must be more than Zero"),
    max: yup
        .number()
        .truncate()
        .moreThan(
            yup.ref("min"),
            "Must be more than Minimum"
        ),
    currency: yup.string(),
}),

2. Strict, Doesn’t even allow spaces: (misses out on number() functions though)

salary: yup.object({
    min: yup.string().matches(/^[0-9]+$/gi, "Must be a Number").required('Required'),
    max: yup.string().matches(/^[0-9]+$/gi, "Must be a Number").required('Required'),
    currency: yup.string().required(),
}),