How to create multiple password checks validation with Yup and RHF? - yup

Question

How to create multiple password checks validation with Yup and RHF?
I have register yup schema and i wanna to add multiple password checks validation like in the nike.com
export const RegisterSchema = yup.object().shape({
email: yup.string().email('Please enter a valid email address.').required('Email is a required field.'),
password: yup
.string()
.required('required')
.min(8, 'Minimum of 8 characters')
.matches(RegExp('(.*[a-z].*)'), '1 lowercase letter')
.matches(RegExp('(.*[A-Z].*)'), '1 uppercase letter')
.matches(RegExp('(.*\\d.*)'), '1 number'),
firstName: yup
.string()
.matches(/^([^0-9]*)$/, 'First name should not contains numbers.')
.max(40, 'First name cannot exceed 40 characters.')
.required('Please enter a first name.'),
lastName: yup
.string()
.matches(/^([^0-9]*)$/, 'Last name should not contains numbers.')
.max(40, 'Last name cannot exceed 40 characters.')
.required('Please enter a last name.'),
dateOfBirth: yup.string().required('Please enter a date of birth.'),
country: yup.string().required('Please enter a country.'),
gender: yup.string().required('Please select a preference.'),
})

Answer 1

You've to use the criteriaMode: 'all' option with useForm.
https://react-hook-form.com/api/useform/[![criteriaMode option]1]1
Here is a working example (v7):
👉🏻 https://codesandbox.io/s/react-hook-form-v6-errors-validatecriteriamode-all-p9xm6