Nullable form field with constraints

[snrmwg]

I would like to use Valibot to validate form fields. The input of text fields should be trimmed. If the result is an empty string the result should be null. For optional fields this would be the expected and accepted value. If there is text in the input field it should be possible to perform additional checks (i.e. minimum length or should be email). How would I do that?

[fabian-hiller]

Have you read the documentation? Here is an example schema. Try it out in our playground.

import * as v from 'valibot';

const FormSchema = v.object({
  value: v.union([
    v.transform(v.string([v.regex(/^\s*$/u)]), () => null),
    v.string([v.toTrimmed(), v.minLength(3), v.maxLength(10)]),
  ]),
});

[snrmwg]

Of course I read the documentation 🙂
But I did not see the union for a solution. Thanks for your hint, Fabian.

I will try it this way:

const EmptyStringToNullTransform = transform(string([regex(/^\s*$/u)]), () => null)
const FormString = union([
    EmptyStringToNullTransform,
    string([toTrimmed()]),
  ])

const form = object({
  firstname: union([
    EmptyStringToNullTransform,
    string([toTrimmed()]),
  ]),
  lastname: string([toTrimmed(), minLength(2, 'too short')]),
  zipCode: union([
    EmptyStringToNullTransform,
    string([toTrimmed(), minLength(4, 'too short'), maxLength(5, 'too long')]),
  ]),
})

And I can simplify it like this:

const optionalFormString = (extraValidations: BaseValidation[] = []) => 
    union([
      EmptyStringToNullTransform,
      string([toTrimmed(), ...extraValidations]),
    ])

const form2 = object({
  firstname: optionalFormString(),
  lastname: optionalFormString([minLength(2, 'too short')]),
  zipCode: optionalFormString([
        minLength(4, 'too short'), 
        maxLength(5, 'too long')]),
})

What do you think about it?

[snrmwg]

As good as it looks. It could not make it work with Svelte Superforms.

In Zod it looks like this and it works:

const nullableFormString = (zs: ZodString = z.string()) => z.preprocess((v) => {
  if (typeof v === 'string') {
    const trimmed = v.trim()
    if (trimmed.length) return trimmed
  }
  return null
}, zs.nullable())

const SearchBoosterSchema = z.object({
  text: nullableFormString()
})

My Validbot schema looks like this:

export const SearchBoosterSchema = z.object({
  text: optionalFormString()
})

But then Superforms struggles with type problems "null vs. undefined". I can't see where source of undefined is.

[fabian-hiller]

You can to the same with Valibot. Check it out in our playground.

import * as v from 'valibot';

const Schema = v.coerce(
  v.nullable(v.string([v.minLength(3)])),
  (input) => (typeof input === 'string' && input.trim()) || null
);