Search code examples
javascriptreactjstypescriptvalidationyup

Yup validation with regex using matches problem

So I have below validation using Yup :

const myValidtion = yup
.string()
.trim()
.matches(/[abcdefghijklmnopqrstuvwxyz]+/ , 'Is not in correct format')
.required();

With this validation, hello world passes as expected. However, what confuses me is why hello WORLD or hello ,&$#$ world also pass.

On the other hand, if we only enter invalid characters like *%$&#$($#, this does not pass and shows me the error. So, as I can see, it only gives me the error if ALL the entry is invalid.

What I'm looking for is how to use the Yup matches method to not pass if the user enters, for example, hello ,*&) world.

Can anyone help me with this?

Solution

  • Your regex should cover your whole string, by using ^ and $ to signify start and end of string:

    /^[abcdefghijklmnopqrstuvwxyz]+$/

    Otherwise, it will match part of your string, which is why it matches when you have a mix of good and bad characters, but fails when every character is bad.

    You can shorten the regex by using a character range like this:

    /^[a-z]+$/

    You can use this online tool to build and test your regex.