ciscoheat / sveltekit-superforms

Making SvelteKit forms a pleasure to use!
https://superforms.rocks
MIT License
2.25k stars 65 forks source link

$constraints empty in Client-Side-Mode #475

Closed philippone closed 1 month ago

philippone commented 2 months ago

Description I'm using Superforms with Valibot in SPA Mode but $constraints are empty ({}).

The form validation seems to be working and displays all errors correctly but when I want to use $constraints of a field it is empty.

const _userSchema = v.object({
    text: v.pipe(v.string(), v.minLength(2), v.maxLength(10))
})

const formData = {
    text: 'hallo'
}

const { form, errors, message, constraints, enhance } = superForm(
    formData,
    {
      SPA: true,
      validators: valibot(_userSchema),
    validationMethod: 'oninput'
    }
  );

$: console.log({$constraints}); // empty {}

I tried it with a Zod Schema but it's also empty.

When using the official tutorial (from docs) that is creating the form on the server then$constraints its populated correctly.

MRE

Valibot:

https://www.sveltelab.dev/9mybppcxpyhugni?files=.%2Fsrc%2Froutes%2F%2Bpage.svelte

Zod: https://www.sveltelab.dev/9mybppcxpyhugni?files=.%2Fsrc%2Froutes%2Fzod%2F%2Bpage.svelte

ciscoheat commented 2 months ago

Constraints are only available on the client when you have used superValidate. The "undocumented" way you're using superForm` now (send an object to it directly) won't be able to figure them out automatically.

To get constraints even in SPA mode, you need to use a +page.ts file: https://superforms.rocks/concepts/spa#using-pagets-instead-of-pageserverts