Yup: Yup.number() allows inputs with spaces

[ryanseipp]

Describe the bug
Using Yup.number() to validate an input, entering a space in the middle of a number will still pass validation, causing issues upstream, say in an API that's expecting an int. Unfortunately, Yup.number() either requires a controlled input that doesn't allow whitespace, or there's no guarantee your users' inputs are being validated properly.

To Reproduce
https://repl.it/repls/MediumPrimaryPhase

Expected behavior
Expect that the whole input is validated to be a valid number, regardless of whitespace or other characters.

Platform (please complete the following information):
Chrome Version 78.0.3904.97
Firefox Version 70.0.1
Safari Version 13.0.3

Additional context
Using Yup.string().matches(/* your number checking regex here */); is a valid workaround.

[oggez]

I've had the same problem, I solved it temporarily with something like:

.test('value-name', 'error-label', () =>
  !yourValue.includes(' '))

[etoxin]

looks like this is also happening with Yup.string()

[hichamelhlaissi]

@oggez not working with Yup.number()

[dmudro]

I've had the same problem, I solved it temporarily with something like:

.test('value-name', 'error-label', () =>
  !yourValue.includes(' '))

not sure if works with numbers as the !yourValue.includes(' ')) test runs on already coerced value which would have the space removed and be typeof === number. Tests are run after any object is cast.

[dmudro]

I thought this was a bug but then _space_ is internationally recognised as thousands separator which could be a case why it's allowed and Yup.number() passes such strings.

A possible solution is to use transform:

let schema = yup.number()
  .transform((value, originalValue) => (/\s/.test(originalValue) ? NaN : value));

For improved reusability you can always add such transform based test as custom method:

function noWhitespace() {
  return this.transform((value, originalValue) => (/\s/.test(originalValue) ? NaN : value));
}

yup.addMethod(yup.number, 'noWhitespace', noWhitespace);

let schema = yup.number()
  .noWhitespace();

[jquense]

happy to take fix for parsing whitespace in the middle of numbers

[dmudro]

Looks like this regex in Yup source allows white space in numbers. It might be there for a reason?

While you can't have space in JS number type, the case for accepting it in validation would be thousands separator, i .e. "100 000". But then the same could be said about comma, i. e. "100,000" and that's not valid.

So yeah this is likely a bug. Maybe removing that regex is enough?

[jquense]

The check is meant to catch trailing whitespace I believe looking at the got history. It's only accidently catching mid number spaces

[eric-tokatlian]

I thought this was a bug but then _space_ is internationally recognised as thousands separator which could be a case why it's allowed and Yup.number() passes such strings.

A possible solution is to use transform:

let schema = yup.number()
  .transform((value, originalValue) => (/\s/.test(originalValue) ? NaN : value));

For improved reusability you can always add such transform based test as custom method:

function noWhitespace() {
  return this.transform((value, originalValue) => (/\s/.test(originalValue) ? NaN : value));
}

yup.addMethod(yup.number, 'noWhitespace', noWhitespace);

let schema = yup.number()
  .noWhitespace();

This is great temp workaround. Thank you!!!!