Optional string schema with regex

[aokigit]

I have a pretty basic schema like this and am using the new pipe function.

export const UserSchema = object({
  name: optional(pipe(string(), trim(), regex(/^[A-Za-z0-9\-_\. ]+$/, "Not optional after all"))),
});

I've tried all possible things, optional, nullable, and nullish. Whenver I post my form by leaving the field empty, the error message "Not optional after all" shows up. What the hell am I doing wrong?

I'm also not quite sure if I like the new pipe functionality or if I just don't understand it correctly. Seems like an extra step to add to my schema and makes me want to go back to Zod 😢

[fabian-hiller]

An empty form field will not return null or undefined. Instead, it usually returns an empty string. Therefore, you need to look for a string that matches your regex or an empty string literal. Here is an example. You can execute and test it in our playground.

import * as v from 'valibot';

const Schema = v.object({
  name: v.union([
    v.literal(''),
    v.pipe(v.string(), v.trim(), v.regex(/^[\w\-. ]+$/iu)),
  ]),
});

We discussed the new API a few months ago in #463 and I talked about its benefits in #502. The feedback has been mostly positive, but I am aware that not everyone will like this change. Feel free to give me feedback.

[aokigit]

I just looked at the documentation for union - I didn't know this existed but this makes a lot of sense now and is insanely helpful.

I'll spend more time understanding and using the pipe function and will share feedback if I have any.
Thanks for the help and insight!

[megacherry]

@fabian-hiller. Thanks for the answer.

But this works not correctly or miss i something?

v.union([v.literal(''), v.pipe(v.string(), v.minLength(2), v.maxLength(30))])

If i type for example only "j" the error output is "Invalid type: Expected "" | string but received "j""

and not: "Invalid length: Expected >=2 but received 1"

[megacherry]

A cool, yes i can confirm it works in my app too, but not in combination with react-hook-form. i will try to tear down the problem and provide you a reproduction. but i think the problem is on my end. :)

btw: good work and keep it up, greetings from dresden.

[megacherry]

I created a reproduction example: https://codesandbox.io/p/devbox/focused-cori-qn3jyg

I hope you find some mistake i made ;)

[fabian-hiller]

I was able to reproduce the problem in our playground. The valibotResolver sets abortPipeEarly to true by default. When the pipe is aborted early, we need to mark the output as untyped, as we may skip any transformations. I will see if I can improve the code so that this only happens when we actually skip a transformation. A workaround for you could be to set the criteriaMode of React Hook Form to 'all' to execute the entire pipeline.

[fabian-hiller]

@megacherry this should be fixed in the next version. Thank you!

[fabian-hiller]

This is now fixed 🎉