Run all the validations for a field in react-hook-form

Question

I am using react-hook-form in my project. I have multiple validators for a same field in my form. Example: firstName field has two validators, 1. minLength, 2. a pattern validator.

        {...register("firstName", {
          minLength: 5,
          pattern: /^[A-Za-z]+$/i
        })}

There might be possibility that both validation may fail at same time, and I need to show both errors one below another. But formState.errors object only have one error. So for above example if the value is 123 then it should show both error messages one below another, but it shows minLength error message only. Here is the code sample - https://codesandbox.io/s/react-hook-form-apply-validation-forked-377q8f?file=/src/index.js:587-692

Answer 1

The criteriaMode property is what you're looking for. It determines whether to display all validation errors or only one at a time.

According to documentation

When set to firstError (default), only the first error from each field will be gathered.
When set to all, all errors from each field will be gathered.

useForm({
  criteriaMode: 'all',
})