Best way for validation optional strings about valibot HOT 11 CLOSED

Try to add Valibot yourself in the latest version. This will fix your problem.

from valibot.

Try to add Valibot yourself in the latest version. This will fix your problem.

Thank you very much for your time.

from valibot.

I am not entirely sure that I understand your use case, but I would write the schema this way:

import * as v from 'valibot';

const Schema = v.union([
  v.literal(''),
  v.string([v.minLength(5), v.maxLength(15)]),
]);

from valibot.

You can learn more about union here:

• https://valibot.dev/guides/unions/
• https://valibot.dev/api/union/

from valibot.

I am not entirely sure that I understand your use case, but I would write the schema this way:

import * as v from 'valibot';

const Schema = v.union([
  v.literal(''),
  v.string([v.minLength(5), v.maxLength(15)]),
]);

It's not quite the same. Issue is when types is changing, initially input has undefined type and when user enters type changing to string. Here is repro (click)

from valibot.

Can you explain what is wrong with this approach? The code seems to work fine. It is normal for a form schema to set a property to string even if it is initially undefined.

from valibot.

Can you explain what is wrong with this approach? The code seems to work fine. It is normal for a form schema to set a property to string even if it is initially undefined.

Validation messages are not what is needed, if you click on the input and do not write anything, validation will work

from valibot.

You might want to change your schema to the following:

import * as v from 'valibot';

const Schema = v.optional(
  v.union([v.literal(''), v.string([v.minLength(5), v.maxLength(15)])]),
  ''
);

Or you should control it through your form library by adding default values or changing the time when the validation happens.

You can read more about optional values here: https://valibot.dev/guides/optionals/

from valibot.

You might want to change your schema to the following:

import * as v from 'valibot';

const Schema = v.optional(
  v.union([v.literal(''), v.string([v.minLength(5), v.maxLength(15)])]),
  ''
);

Or you should control it through your form library by adding default values or changing the time when the validation happens.

You can read more about optional values here: https://valibot.dev/guides/optionals/

Sorry for such a late response, this option works partially, the problem with messages remains, instead it shows Invalid type. Updated repro: https://stackblitz.com/edit/nuxt-starter-lcbmm9?file=app.vue,nuxt.config.ts

from valibot.

Sorry for such a late response, this option works partially, the problem with messages remains...

What version of Valibot are you using? I think we have fixed this in a newer version. Please upgrade to the newest version and try it again.

from valibot.

Sorry for such a late response, this option works partially, the problem with messages remains...

What version of Valibot are you using? I think we have fixed this in a newer version. Please upgrade to the newest version and try it again.

It's library from vee-validate..

"node_modules/@vee-validate/valibot": {
      "version": "4.12.5",
      "resolved": "https://registry.npmjs.org/@vee-validate/valibot/-/valibot-4.12.5.tgz",
      "integrity": "sha512-T3iqo37hgyK88qpsEoIZw89qMnnJGc8DrJdotH93avvUP793KBq7+K0OIKJZb+xYSsOeF9cFsJ5gLT0WTAHjMg==",
      "dependencies": {
        "type-fest": "^4.8.3",
        "valibot": "^0.24.1",
        "vee-validate": "4.12.5"
      }
    }

from valibot.