2

What I have

I'm trying to create a password field which validates the strength of the input, in another answer I found the regex I can use to validate if the input meets specific conditions, the problem with this approach is that it throws only one error message for each of the validations.

password: yup
    .string()
    .required('Please Enter your password')
    .matches(
      /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
      "Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and one special case Character"
    ),

What i want

what I want is validate each of the characters that the user enters and throw the specific errors if each of the conditions are fulfilled, e.g if user inpunt is missing a lower case, it should throw the error 'must have a lower case', if the input is missing a number, it should throw the number 'must have a number' and so on. What I've tried it's to use match but this doesn't work:

password: yup
    .string()
    .required('Please Enter your password')
    .matches(/^[a-z]+$/, 'One lowercase character')
    .matches(/^[A-Z]+$/, 'One uppercase character')
    .matches(/^\d+$/, 'One number')
    // ... other validation
Ajeet Shah
  • 18,551
  • 8
  • 57
  • 87
Cristian Flórez
  • 2,277
  • 5
  • 29
  • 51
  • I'd highly recommend a different password requirement. https://xkcd.com/936/ Convoluted, hard-to-remember but short passwords are probably the worst approach there is – CertainPerformance Apr 12 '21 at 02:59
  • understood, but I still want to know the approach to use to solve this kind of problems, individual regex validations with Yup and formik. – Cristian Flórez Apr 12 '21 at 03:09

1 Answers1

8

You just need to remove ^ (matches the beginning of input) and $ (matches the end of input) assertions from your code, like so:

password: Yup.string()
  .required("Required")
  .min(8, "Must be 8 characters or more")
  .matches(/[a-z]+/, "One lowercase character")
  .matches(/[A-Z]+/, "One uppercase character")
  .matches(/[@$!%*#?&]+/, "One special character")
  .matches(/\d+/, "One number"),

Here is a demo.

Ajeet Shah
  • 18,551
  • 8
  • 57
  • 87