multistep reporter displays errors on steps 2+ and select

[ryanrussell]

Hello,

This originates from @outerlook's multistep demo at #25

I did not want to hijack his issue, so I made a new one.

I'm having some issues using Felte reporters with multi-step forms.

1) Steps 2+ display errors by default

If you look at his REPL at: https://svelte.dev/repl/d83a688976fd466ab0a1d55400ab94f6?version=3.38.2

He's using a dynamic component to load the steps. If you complete step 1(email), step 2 has the error message displayed by default(password requirements...) since submit has already been used.

2) If you use a select, it displays errors by default(before submit)

See this fork REPL at: https://svelte.dev/repl/f92f4e8afa3247cfb1e7ff4113437028?version=3.38.2

I tried this with Tippy reporter as well, but it doesn't want to play nice with the svelte REPL, so I stuck with the dom reporter.

Also tried swapping out for the yup validator, but saw the same issue.

Is this the "best practices" approach towards a multistep form?

I'm not sure if this needs to be worked on at the validator or reporter level, or if it's just a feature that needs more development.

Any guidance on how to use the felte validators/reporters on a multi-step form would be greatly appreciated.

Thanks!
Ryan

p.s. Here's another approach with custom prev/next buttons and functional pre-population: https://github.com/MirrorBytes/MultiStep -- @MirrorBytes actually suggested I take a look at Felte instead since you had put in a lot of refinement and gained traction.

Here's hoping for a good way to pull it all together and have a great forms experience in Svelte.

[pablo-abc]

My preferred way to approach multi steps forms is using a separate form for each step (since this way it may also be used without JS with a few tweaks here and there).

The other way (that I also mentioned in #25) is using a <button type="button"> to go to the next step.

Or you may import directly the validateSchema function from the validators and use a different schema depending on which step you are in.

A dedicated API for multi-step forms is definitely something I'm thinking about, most likely going in the route of one form per step. But I'm still debating if it's worth it at all to add something like that to the core API.

The select element being validate on start is definitely a bug so I'm marking this as such, tho!

[pablo-abc]

Just so you know, the select issue has been resolved and is live on [email protected]

Your first issue does have to do with #25 so I am closing this in favor of it to keep the discussion focused.