how to correctly use Yup/formik number validation ReactJs

Question

I would like to explain my problem of the day.

I'm using a simple number type validation

number: Yup.number()
.required("Required")
.max(100000000, "To big")
.min(0, "Not negative number")

my problem is ,in the entry of the field, I can add only one letter the "e", I do not understand why

example "12e3"

while I would like to enter only numbers

example "123"

if you have any ideas, thank you

Neff

https://www.smashingmagazine.com/2020/10/react-validation-formik-yup/ see following article — Alvino, Dec 06 '22 at 09:20

score 2 · Accepted Answer · answered Dec 06 '22 at 09:18

There is more than one way to achieve your only number input. The problem is not yup.

check your input before sending. Exclude using ASCII
check your input before sending. Exclude using Regex1 or Regex2
change your input form type to number from basic html

score 1 · Answer 2 · answered Dec 06 '22 at 09:04

1

You can't handle it with Yup. because "e" interprets as number. in math "e" is a way to represent scientific notation. You can use react-number-format for handling this.

answered Dec 06 '22 at 09:04

Serwa_srp

41
6

thank you very much for your solution, my I would like to find another way than to have to by a library – Neff Dec 06 '22 at 09:16

score 0 · Answer 3 · answered Dec 06 '22 at 10:19

Use this condition, it's take care of "e".

const digitsOnly = (value) => /^\d+$/.test(value)

Yup.object().shape({
           mobile: Yup.string().required('please_enter_mobile').test('Digits only', 'digits_only', digitsOnly).min(7,'please_enter_valid_mobile').max(15, 'Maximum number limits')
        }).required()

how to correctly use Yup/formik number validation ReactJs

3 Answers3