pwightman
Context: I have a multi-step form (10+ steps) made in LiveView (Surface, technically, but I think this question is not Surface-specific). Each step contains some form inputs, on submission the data is validated, saved to the DB, then state in the LiveView is updated to show the next step (user remains at the same URL for each step).
Everything works great for the first rendered step, form errors show when the user has filled something out wrong, but not until they’ve entered something in the field.
My problem is that subsequent steps have their errors showing immediately. I know this has to do with phx-no-feedback, which as far as I can tell is a stateful thing handled on the client and I don’t see how I can tell it to “reset” back to a clean state.
I have worked around this by doing a push_redirect to the same URL, causing the liveview to remount on each step, however this means I can no longer easily send push_events because it’s swallowed by the redirect. I’d like to just fix the core issue of form errors showing up when I don’t want them to.
push_patch to a new URL for each step (which I don’t want to do) such as forms/:id?step=:step_id also has the same behavior (pictured below).
Any ideas/workarounds?
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #blog-post
- #elixir-ls
- #elixirconf-us
- #ai
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 3- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
LostKobrakai
Are the steps all one form? I’d probably suggest using separate forms. But you can also “reset” a form by updating its
idattribute.pwightman
Each step is using the same custom form wrapper component, which uses the same hard-coded id. Changing the
idper step totally worked! Thank you!KP123
Is ID updating the best method for resetting forms in July 2024? I have a form that’s always visible and needs to be reset after submit and there are a number of proposed methods for how this could best be done:
button[type=reset]and do my submission validations in the reset handler. But then there’s a flash of empty form → previous form with errors when submission failsIt would be nice if we could set changeset actions to
:resetor some other convenience since same page form resetting is a pretty common task.