Hi all, I’ve been building a out a multi-step join/checkout flow and I’m liking the results. I used https://www.markusbodner.com/til/2019/05/31/multi-step-form-using-phoenix-live-view/ for inspiration. The problem I’m having is with multiple fields on the same step, and validations called for all …

could you elaborate on that? I have tried using phx-debounce with a value of blur for the input fields, and that does work to limit validation of the form until I leave a field, but as soon as the name field loses focus the email field is validated too. I guess at the core of it I’m looking to ign…

I mean put phx_input: “blur” to every field to be validated. <%= if @current_step == 2 do %> <%= label f, :name %> <%= text_input f, :name, phx_input: “blur” %> <%= error_tag f, :name %> <%= label f, :email %> <%= text_input f, :email, phx_input: “blur” %> <%= error_tag f, :email %> <% end %>…

@peck Did you add phx_error_for to your error_tag function as documented here: Phoenix.LiveView — Phoenix LiveView v1.2.5 I had to do that to keep error messages from appearing on fields that haven’t been focused yet.

I get the same behavior with that added

@tme_317 I did, it is in the bottom of my LiveView file. :frowning: Since you were able to do it that makes me think that there must be something simple that I missed.

Sorry I didn’t see that! Yeah I was able to do it… instead of doing the conditional rendering approach from the article where you have <%= if @current_step == 3 do %> ... #fields ... <% end %> I am cheating by having all of the fields rendered but wrapping each step/group of fields in divs where al…

@tme_317 yeah, I think my next step here is to strip down everything to just two fields with just one “step” so I only have save and validate events to handle and see if I can get it to work the way I want. No shame at all in display:none hack, if it works it works! but unfortunately wouldn’t help …

@peck Yeah… I am using the latest release of Phoenix and a recent master version of LV including the awesome live_components. I think using the display: none; instead of conditional rendering would help you since I noticed you have a the radio button :product_id which only appears on step 1 and the…

@tme_317 thanks so much for helping me work through it. Updating the Changeset seems to be the problem. My mental model of iteratively build up the changeset in the in the state of the LiveView was completely wrong (and probably not the best idea for memory size of the process). It seems the right …

Elixir Programming Language Forum

Liveview Multistep Forms (Wizards) Field Validation

Questions & Help Questions

qilongxu December 3, 2019, 5:04pm 2

Probably you need add “phx-blur” to your input field.