Multiple Error messages

[joshyboyrules]

Hello! First off, thanks for this lib, really excited to use it in our product soon.

Currently, we have a use case where we would like to display multiple validation errors at the same time.

Is this possible with react hook form? AFAIK, the validation stops once an error is found so other validation errors are not populated.

validate: {
  required: () => {}, // e.g. required message will be populated by not minLength.
  minLength: () => {}
}

Thanks!

[kotarella1110]

@joshyudeep you can set validateCriteriaMode to all for multiple error messages.

// set validateCriteriaMode to `all`
const { register } = useForm({
  validateCriteriaMode: "firstErrorDetected",
})

{errors.yourInputName?.types && Object.entries(errors.yourInputName?.types).map(([type, message]) => (
  <p key={type}>{message}</p>
))}

please see example here.

[joshyboyrules]

Thanks for the response! Yup, setting criteriaMode to all enables multiple validation errors 😄 . However is there a way to note that the validation is passing?

If you see the above example we have Cannot be empty with a checkmark which shows that the specific validation is passing. Basically what I'm asking for is some error object like this.

{
  types: {
     empty: {
       valid: true,
       message: 'Cannot be empty'
     }
  }
}

I know you guys probably don't support this but if you know of someway / advice on how I could implement this that'd be great! Much appreciated, and thanks again for the timely response.

[bluebill1049]

I think you can keep an array of rules against RHF's validation result.

[nani1008]

@joshyudeep can you tell me how did you work on this? I have the same issue with the icon thing with "X" and "Check", any help will do. Thank you very much

[joshyboyrules]

I think you can overload the error message with your own custom error messages within the error state, but I probably wouldn't recommend this approach because doing that would break other functionality (e.g. RHF's validationg, error handling, handle submit, etc.)

[joaopedrodcf]

Just dropping here to add another iteration over this, basically in my use case I have a couple of custom messages:

{
"message": "xxx",
"type": "too_small",
"types": {
"too_small": "xxx,
"custom": [
"xxx",
"xxx",
"xxx"
]
},
}

So to print all the messages I flattened them

const { register } = useForm({
  validateCriteriaMode: "firstErrorDetected",
})

const allErrors =
        (
            error?.types &&
            Object.entries(error.types).map(([_, message]) => message)
        )?.flat() ?? [];
        
{allErrors.map((message) => (
  <p key={message}>{message}</p>
))} 

Hopefully this is useful for others