I'm new here. I have an issue with Yup validation. I want client enter number only from 0-9, without entering e, E, +, - characters. I have code like this but user still can enter e, +, -. Is there any way to avoide these characters?

Yup.number()
  .typeError("Please enter number value only")
  .nullable()
  .notRequired()
  .min(0)
  .max(100)
  .moreThan(-1, "Negative values not accepted")

I try with string().matches(regex) but it still showing err with negative values. Is there the best way to use .number() without these characters?

I'm new here. I have an issue with Yup validation. I want client enter number only from 0-9, without entering e, E, +, - characters. I have code like this but user still can enter e, +, -. Is there any way to avoide these characters?

Yup.number()
  .typeError("Please enter number value only")
  .nullable()
  .notRequired()
  .min(0)
  .max(100)
  .moreThan(-1, "Negative values not accepted")

I try with string().matches(regex) but it still showing err with negative values. Is there the best way to use .number() without these characters?

• javascript
• reactjs
• yup

1 Answer 1

You can add a custom validator with the test method:

Yup
  .number()
  .nullable()
  .notRequired()
  .min(0)
  .max(100)
  .test(
    "noEOrSign", // type of the validator (should be unique)
    "Number had an 'e' or sign.", // error message
    (value) => typeof value === "number" && !/[eE+-]/.test(value.toString())
  );