Valibot custom pipe seems not to be evaluated

[ahoiroman]

Version

@nuxt/ui: 2.8.0
nuxt: 3.7.0

Reproduction Link

https://stackblitz.com/edit/nuxt-ui-8atj1c?file=app.vue,package.json,nuxt.config.ts

Steps to reproduce

Enter non-matching passwords like

"Test Test Test"

and

"Test1 Test1 Test1"

What is Expected?

The custom check should be evaluated and the input should be marked red.

What is actually happening?

It's not marked red, although the submit-message is not shown (which is correct)

[ddahan]

Not sure if related, but after a full fresh install, I got a Failed to resolve import "valibot" from "node_modules/@nuxt/ui/dist/runtime/components/forms/Form.vue". Does the file exist? when running the dev server.

While it does not prevent development, the build fails so deployment is not possible.

[coderismaila]

Not sure if related, but after a full fresh install, I got a Failed to resolve import "valibot" from "node_modules/@nuxt/ui/dist/runtime/components/forms/Form.vue". Does the file exist? when running the dev server.

Upgrade to @nuxt/ui 2.8.0 and the above error shows up when I run my code. I hope this get fixed ASAP because this version is currently not usable.

[benjamincanac]

This has been fixed in #617, will try to release it asap!

[ahoiroman]

Will this also fix the initial problem of this issue? In my case, most of the validations do work. But the custom one is not. Or am I just too stupid to see something obvious? ;-)

[benjamincanac]

@Sevichecc @romhml any insight on this?

[romhml]

Looks like the custom valibot rule raises an issue without a path:

{
    "reason": "object",
    "validation": "custom",
    "origin": "value",
    "message": "The passwords do not match.",
    "input": {
        "password": "askdjaslkdjaklsdjasd",
        "password_confirmation": "askjdasjdkasjda"
    }
}

Which makes sense because it's not bound to any attribute in the schema definition. Without this, the component cannot properly inject the error into any fields.

I'd suggest to move this rule to password_confirmation in the schema, or use the validate prop to perform the check (it can be used alongside a schema).

We could also add support for global rules directly inside the Form component, by displaying global errors at the bottom of the Form.

[ahoiroman]

Alright.

A solution like this fabian-hiller/valibot#76 (comment) wouldn't solve this either, for the same reason. This makes sense. I was wondering, because parsing the schema manually worked as expected.

[fabian-hiller]

This is not a bug in Nuxt UI. You have to forward you error message: https://valibot.dev/api/forward/