How to conditionally require a field?

[ewautr]

Hi, I have a field that should be required conditionally, depending on a checkbox outside of the form. How can I implement that with Valibot?

const schema = object( { name: nullable(string([minLength(1)])), }, );

[fabian-hiller]

There are several solutions. To make it type safe, I recommend using a discriminated union with variant. To make it easy, I recommend using custom in the pipeline of your object to validate the data type or value of the key. If the dependent value is not part of the schema, you will have to figure out how to get it into the schema validation. If you provide me with more code, I can try to help you.

[ewautr]

Thanks for answering, it would be awesome to see an example of a solution. Here is some code with my schema and a reactive variable I need to use. If a variable is true, the name field should be a required string, if it is false it should be null.

const nameUnknown = ref(false);

const schema = object({
  name: nullable(string([minLength(1)])),
});

[fabian-hiller]

I recommend to write the following. union has no pipe argument yet, that's why I added the validation to object and forwarded the error to name. I plan to improve that.

Whenever nameUnknown.value is true or name is a string, the input is valid. Otherwise the error message is displayed.

import { custom, forward, minLength, null_, nullable, object, string, union } from 'valibot';

const nameUnknown = ref(false);

// Currently
const schema = object(
  {
    name: nullable(string([minLength(1)])),
  },
  [
    forward(
      custom(
        (input) => nameUnknown.value || typeof input.name === 'string',
        'Name is required.'
      ),
      ['name']
    ),
  ]
);

// Planned improvement
const schema = object({
  name: union(
    [null_(), string([minLength(1)])],
    [
      custom(
        (input) => nameUnknown.value || typeof input.name === 'string',
        'Name is required.'
      ),
    ]
  ),
});

[ewautr]

Works great, thank you for help!

[fabian-hiller]

Please let me know if you have any ideas on how to improve the API and DX of Valibot. I am happy to receive any feedback!

[fabian-hiller]

The planned improvement will be available in the next release.

[fabian-hiller]

v0.25.0 is available

[fresonn]

@fabian-hiller I'll continue here ok?

This is how I solved this problem, variant and union didn't help

import * as v from 'valibot';

export const schema1 = v.object({
  name: v.pipe(
    v.string(),
    v.trim(),
    v.nonEmpty(),
  ),
});

/*

// This won't work

const schema2 = v.object({
  supplier: v.picklist(['JS', 'GO']),
  ecmaVersion: v.union(
    [v.null(), v.string()],
    [v.check((input) = input.supplier !== 'JS', 'ecmaVersion required'],
  ),
});
*/

export const schema2 = v.pipe(
  v.object({
    supplier: v.picklist(['JS', 'GO']),
    ecmaVersion: v.optional(v.string())
  }),
  v.forward(
    v.check((input) => input.supplier !== 'JS', 'ecmaVersion required'),
    ['ecmaVersion']
  )
)

// This won't work
// const Schema = v.object({
//   ...schema1.entries,
//   ...schema2.entries,
// });

const Schema = v.intersect([
  schema1,
  schema2,
]);



const result = v.safeParse(Schema, {
  name: 'Some name',
  supplier: 'JS',
  recurrence: undefined,
});

console.log(result);

[fabian-hiller]

Yes, our API has changed since this discussion was created: https://valibot.dev/blog/valibot-v0.31.0-is-finally-available/

Thank you for sharing your working code with others here!

[fresonn]

@fabian-hiller thank you for your library too