I have a password reset form where the validation for new password is such that it should match a regex and should not match the userId of the user. The userId check has to be case insensitive.

I tried lowercase method but then the regex validation fails as the value is transformed to lower case before the validation starts.

  newPassword: yup
        .string()
        .notOneOf(
          [yup.ref("oldPassword")],
          "New password must be different than current password."
        )
        .matches(REGEX_PASSWORD, "Password does not meet requirements.")
        .lowercase()
        .notOneOf(
          [userId.toLowerCase()],
          "New password must not be same as userId"
        )

Is there any method which can be used to transform the value only for userId check so that I can perform case insensitive check without worrying about regex fails.

I have a password reset form where the validation for new password is such that it should match a regex and should not match the userId of the user. The userId check has to be case insensitive.

I tried lowercase method but then the regex validation fails as the value is transformed to lower case before the validation starts.

  newPassword: yup
        .string()
        .notOneOf(
          [yup.ref("oldPassword")],
          "New password must be different than current password."
        )
        .matches(REGEX_PASSWORD, "Password does not meet requirements.")
        .lowercase()
        .notOneOf(
          [userId.toLowerCase()],
          "New password must not be same as userId"
        )

Is there any method which can be used to transform the value only for userId check so that I can perform case insensitive check without worrying about regex fails.

• javascript
• reactjs
• react-final-form
• yup

• why not make your REGEX_PASSWORD case insensitive with i flag ? – Code Maniac Commented Aug 21, 2019 at 9:14
• The regex has an uppercase character check as well. The password should atleast have one upper chase character. – Nikhil Commented Aug 21, 2019 at 9:48
• IMO you can keep two version one which is case sensitive and another case insensitive, use them as per need – Code Maniac Commented Aug 21, 2019 at 9:56
• Hi @Nikhil, can you post an example showing how to use react-final-form and yup together? It will be of great help. Thanks. – Rohan Agarwal Commented Sep 24, 2019 at 13:07
• @RohanAgarwal ` <Form validate={this.validator} ... validator = yupValidator( yup.object().shape({ name: yup.string().required(), email: yup.string().email() }) ); function yupValidator(schema: ObjectSchema): (values) => object { return (values): any => { schema.validateSync(values, { abortEarly: false }); }; } ` I'm having issue formatting it as a code here. But if you copy and manually format it you should be good to go. I hope the code is self explanatory. – Nikhil Commented Sep 25, 2019 at 10:30

1 Answer 1

When using Yup if all normal features fail you you can use the .test feature, documented here - https://github./jquense/yup#mixedtestname-string-message-string--function-test-function-schema

mixed.test(name: string, message: string | function, test: function): Schema

Adds a test function to the validation chain. Tests are run after any object is cast. Many types have some tests built in, but you can create custom ones easily. In order to allow asynchronous custom validations all (or no) tests are run asynchronously. A consequence of this is that test execution order cannot be guaranteed.

As you note from that quoted text is that test (including those build in by Yup such as the ones you normally use) occur after object is cast, hence your issue. However by making your own test you can cast the value inside and do whatever logic you wish. In your instance it may look something like this:

 newPassword: yup
    .string()
    .notOneOf(
      [yup.ref("oldPassword")],
      "New password must be different than current password."
    )
    .matches(REGEX_PASSWORD, "Password does not meet requirements.")
    .test(
      'uidCheck',
      'New password must not be the same as userId',
      (item) => item !== undefined ? item.toLowerCase() !== userId.toLowerCase() : true
     )