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.