Validation with Yup doesn't show the correct message

Question

I'm using Yup and Formik to validate some fields.

One of the must be a number so this is how it was done:

import * as Yup from 'yup';

...

const requiredErrorMessage = 'This field is required';
const numberErrorMessage = 'This field is must be numerical';

 const validationSchema = Yup.object({
      anotherField: Yup.string().required(requiredErrorMessage),
      numberField: Yup.number(numberErrorMessage).required(requiredErrorMessage),
 });

So I would expect it to show the message "This field is must be numerical" if there are introduced different characters than numbers.

But it doesn't. If I write "a" in the field the message is this: "price must be a number type, but the final value was: NaN (cast from the value "a")."

Why is it showing a different message?

Answer 1

For a custom message to number type you should call the typeError() function:

numberField: Yup.number().typeError(numberErrorMessage).required(requiredErrorMessage),