Is there a yup function that validates a specific length?
I tried .min(5)
and .max(5)
, but I want something that ensures the number is exactly 5 characters (ie, zip code).
This check leads to the best validation experience:
Yup.string()
.required()
.matches(/^[0-9]+$/, "Must be only digits")
.min(5, 'Must be exactly 5 digits')
.max(5, 'Must be exactly 5 digits')
output:
12f1 // Must be only digits
123 // Must be exactly 5 digits
123456 // Must be exactly 5 digits
01234 // valid
11106 // valid
console.log(08763)
will output > 8763
but console.log('08763')
will output > 08763
I don't think there's anything built in but it's easy to implement with test
:
yup.string()
.test('len', 'Must be exactly 5 characters', val => val.length === 5)
000123.toString().length
outputs 2
, not 3
. This is because the JavaScript parser interprets numeric literals starting with zero as octal numbers. But JavaScript has no internal representation for a number with leading zeros. If it has leading zeros then it must be a string. And if you don't want leading zeros on your string, normalise it parseFloat("000123").toString().length === 3
.
For future reference, if you're looking to validate a number (zip code), the above solution requires a slight tweak. The function should be :
Yup.number().test('len', 'Must be exactly 5 characters', val => val.toString().length === 5)
.length
does not work on numbers, only strings.
Yup.number().test('len', 'Must be exactly 5 characters', (val) => { if(val) return val.toString().length === 8; })
for example.
val && val => val.toString().length === 5
You can also use string.length
.
yup.string().length(5)
But it doesn't work with numbers starting with zeros:
const yup = require('yup')
const schema = yup.string().length(5)
console.log(schema.isValidSync(12345)) // (true) This is valid.
console.log(schema.isValidSync(00123)) // (false) This is NOT valid.
@Tamlyn's answer covers the length validation aspect of the question quite well.
In the case of a zip code, you could use a regex to enforce the length and limit to numeral values within the Yup.string()
(you wouldn't want to use a Yup.number()
type as it wouldn't support zip codes starting with a zero 0####
)
// ##### format zip code
Yup.string().matches(/^[0-9]{5}$/, 'Must be exactly 5 digits')
// ##### and #####-#### format zip codes
Yup.string().matches(/^[0-9]{5}(?:-[0-9]{4})?$/, 'Must be 5 or 9 digits')
Works like a charm for type number.
yup.number().test('len', 'Max 6 numbers', (val) => val.toString().length <= 6)
To add to the other answers, none of them are checking that a value exists (I see some have mentioned this in comments after posting this though)...
If it is not present and the field is left empty, it will be trying to get the length of undefined
or null
which will then give you a javascript error and prevent other conditions such as .required()
from working (if you had it setup like of course).
This would probably be slightly better:
// Check we have a value as well
Yup.number().test('len', 'Must be exactly 5 characters', val => val && val.toString().length === 5 )
number()
doesn't work as you could be entering a security code that starts with zeros and Yup.number() swallows them. Example: 000445
would be passed on to val
as 445
.
Try this:
Yup.number()
.required()
.min(10000, 'Must be exactly 5 characters')
.max(99999, 'Must be exactly 5 characters')
.label("Zip Code"),
0
? You cannot make a zip code field a number nor validate it is between two numbers.
You can also still use the validation for number but when using test for validation of length you will have convert it to a string before testing it.
Yup.object().shape({
zipCode: Yup.number()
.required('Zip code is a required field')// optional
.typeError('Zip code can only be a number')// optional as well
.test('len', 'Zip code needs to be excatly 5 digits', val => val.toString().length === 5)
});
The test API runs into issues with ReactJs when your field has no value. You can use the length API instead
Yup.string().length(4, 'This field has to be exactly 4 characters!')
matches(/^[0-9]{8}$/, "Only 8 digits") Now, the Yup will show error if the user input letter and more or less 8 digits
@efru's answer works great for numbers that are less than 22 characters. However val.toString().length
does not work for numbers larger than 22 characters. The reason for this is that larger numbers are converted to exponential format when converted to a string in javascript.
The solution I found that works best is:
Yup.number().test('len', 'Must be exactly 25 characters', val => Math.ceil(Math.log10(val + 1)) === 25)
import { string, date} from 'yup' // Take out what is needed in import
string()
.trim()
.matches(
/^[0-9]{4}[0-9]{2}[0-9]{2}T 0-9]{2}:[0-9]{2}:[0-9]{2}.[0-9]{3}Z$/,
'createdOn is not in correct format',
)
.max(24),
i convert my number to string and store my number in a react state as a string.
my solution was this
amount: Yup.number()
.test('len', maxAmountLength, () => amountState.length <= 50)
You can use typeError
like following:
yup.number()
.typeError('Must be only digits')
.test('len', 'Must be exactly 5 characters', val => val.length === 5)
This is a simple solution, but it is not perfect.
Yup.string()
.required()
.min(5, 'Must be exactly 5 digits')
.max(5, 'Must be exactly 5 digits')
One of the solutions is:
Yup.string().matches(/^[0-9]{5}$/, 'Must be exactly 5 digits')