A case for an immediately evaluated validation pipe

[dboune]

I believe the only available method of cross-field validation does not execute until all individual property schemas are valid (not including value validations). In the case of form validation, this isn't always reasonable.

It is possible to work around this in cases where all other properties have defaults or are otherwise not required and where it is reasonable to always start with a fully valid schema.

My goal is to ensure that user feedback in forms is consistent and that errors in form input can be exposed immediately when appropriate. In particular, having a user progress through a form and end up with surprise validations leads to poor UX.

Please see my extremely naive implementation here (switch to the Immediately Evaluated Pipe tab): https://codesandbox.io/p/devbox/react-mui-react-hook-form-valibot-hddfsq?file=%2Fsrc%2Fvalidation%2Frefine.ts%3A1%2C1-34%2C1

The refine utility intentionally performs validation against the input. It doesn't cover all potentials, I've probably done something terrible, and it certainly could be better composed, but it does function for this limited example.

[fabian-hiller]

Your refine function is incorrectly typed. The input of the pipe should be unknown because you always run it. Please send me your schema without refine which causes the problems you describe. This will help me understand your problem better. Please reduce it to the minimal schema and the input you pass to it.

[dboune]

That's fair. I was not thinking of the widest set of potentials at that moment as my current scenario doesn't include them. Indeed, unknown would be the only appropriate type from Valibot's perspective for that moment in time.

Here is a minimal example with inputs. In this configuration, the pipe on the object will not be executed until ccMe has a valid value (one of the values in the picklist). I need to surface the errors described in the pipe immediately.

Under standard conditions... From the type perspective, contactListId must be potentially null or a string, and contactIds will always be an array. Only one must pass additional validation (by the following definition), and both may be provided.

ccMe must be one of the picklist values to pass validation but must initially be null. Notably, the ultimate destination of this property requires a type of 'true' | 'false' specifically, and not simply string.

• contactListId and contactIds errors, as described by the object pipe configuration shown below, should be emitted for both properties only when contactListId is null or an empty string AND contactIds is an empty array. (working, but only if ccMe is valid).
• If either contactListId is a non-empty string OR contactIds is a non-empty array, the errors described by the pipe should not appear for either property. (working).

const SendFormSchema = v.object(
  {
    ccMe: v.picklist(["true", "false"], "Select an option"),
    contactListId: v.nullable(v.string("Not a string")),
    contactIds: v.transform(
      v.array(v.string("Not a string"), "Not an array"),
      (value) => (value.length > 0 ? value : null),
    ),
  },
  [
    v.forward(
      v.custom((value) => {
        if (
          !value.contactListId &&
          (!value.contactIds || value.contactIds.length < 1)
        ) {
          return false;
        }

        return true;
      }, "Please select a contact list."),
      ["contactListId"],
    ),
    v.forward(
      v.custom((value) => {
        if (
          !value.contactListId &&
          (!value.contactIds || value.contactIds.length < 1)
        ) {
          return false;
        }

        return true;
      }, "Please select one or more contacts."),
      ["contactIds"],
    ),
  ],
);

const initialValues = {
  ccMe: null,
  contactListId: null,
  contactIds: [],
};

try {
  const result = v.parse(SendFormSchema, initialValues);
  console.log(result);
} catch (error) {
  console.log(error);
}

[fabian-hiller]

It's true that picklist is a problem here. I appreciate your feedback, but unfortunately I do not have a proper solution for you at the moment. There is a workaround, but it changes the type of ccMe to string.

import * as v from 'valibot';

const CcMeSchema = v.union(
  [v.string([v.value('true')]), v.string([v.value('false')])],
  'Select an option'
);

Another workaround would be to set a default value for ccMe with optional, but this could change the behavior of your form.

[dboune]

No worries. I have a local solution, but I suspect this is need that will come up repeatedly over time and will involve more situations than the one I'm describing here.

If I have additional scenarios as I go along here I'll describe those as well to continue building the case, and possibly others will also provide additional feedback.

[TeChn4K]

This is a very common scenario for me too.
Mostly all my forms contain toggle fields and associated form items.

Here is a simple but typical exemple : valibot playground
value1 is required by the object schema; value2 can be required by the piped check on isValue2Required.
My goal is to be able to display object validations AND piped checks at the same time.

@fabian-hiller Do you have any new recommendation for this use case? specially with the new v0.31 in mind?
@dboune Your codesandbox demo do not use your refine function, and I couldn't get it to work. Can you give me a little help?

[fabian-hiller]

Yes, this will be possible soon. I plan to implement a partialCheck action. This will allow you to select the fields you want to validate. As long as these fields have no issues, the validation will be executed. Do you have ideas for alternative names?

[TeChn4K]

I'm very hyped!
This partialCheck could be a nice answer to this use case : nothing happen if isValue2Required is null because it would be invalid, but a valid boolean value would cause the partialCheck to be executed (and typed!). Perfect

partialCheck, immediateCheck, crossFieldCheck, dependentCheck ?

[fabian-hiller]

Another name could be maybeCheck. I will implement this action soon. 🧩