I would like to use Valibot to validate form fields. The input of text fields should b

Of course I read the documentation 🙂 But I did not see the <code class="notransla

You can to the same with Valibot. Check it out in our <a href="https://valibot.dev/pla

Nullable form field with constraints about valibot HOT 4 CLOSED

snrmwg commented on May 27, 2024

Nullable form field with constraints

from valibot.

Comments (4)

fabian-hiller commented on May 27, 2024

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)]),
  ]),
});

from valibot.

snrmwg commented on May 27, 2024

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?

from valibot.

snrmwg commented on May 27, 2024

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.

from valibot.

fabian-hiller commented on May 27, 2024

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
);