Returning multiple errors from single validator

[sbruinsje]

As far as I understand a field validator should return a single string. Yet the errors meta property is an array which you can join. I get that this allows you to show errors generated for validators using different events (onChange, onBlur, etc.), am I correct that its not possible to return multiple error strings from a validator of one event type (e.g. onChange).

I would expect to be able to return an array of error strings:

<form.Field
  name="name"
  validators={{
    onChange: ({ value }) => {
      return [
        value.length > 20 ? "name too long" : null,
        value.includes("fart") ? "name may not contain the word 'fart'" : null,
      ].filter(Boolean);
  }}
>
 ....
</form.Field>

Or alternatively support an array of validators for each event:

<form.Field
  name="name"
  validators={{
    onChange: [
      ({ value }) => value.length > 10 ? "name too long" : null,
      ({ value }) => value.includes("fart") ? "name may not contain the word 'fart'" : null,
    ]
  }}
>
 ....
</form.Field>

Then each of the errors that apply are set in the field.state.errors array.

[brandonryan]

Agreed. Right now I have a helper function to let me apply multiple validators in order.

/** Returns a function that calls each fn in order, returning the first value that is truthy */
export function cascadeCall<Args extends unknown[], R>(...fns: Array<Fn<Args, R> | undefined>): Fn<Args, R | undefined> {
    return (...args) => {
        for (const fn of fns) {
            if (!fn) continue;
            const result = fn(...args);
            if (result) return result;
        }
    }
}

IMO it should be up to the field component to decide how to display errors from the array, and if the validator wants first error only reported, it can just report the first error as single string, otherwise array.

[Balastrong]

Replacing string with string[] in ValidationError (the return type of validators) would be a massive breaking change, forcing all validators to return an array instead of a string all the time. I'm not sure we should go that way.

A tradeoff could be accepting both string | string[]. This would leave all existing validators untouched but still introduce a tiny breaking change since meta.errorMap.onChange & co would no longer be string but string | string[] and the user has to handle that explicitly all the time.
That might be not too painful as in all examples we're usually recommending to display all errors in meta.errors that is already an array. We can simply flatMap the errors internally to avoid exposing string[][] errors, not a big deal.

With that said, I see the benefit of having arrays and I'm in for exploring the change :)