How does LiveView keep track of which forms fields have been altered?

FeeJai

I am currently building a form that contains an input type=date and a select which allows users to chose a location. Depending on the location, the time zone changes and with it the allowed date range.
To validate, I have used Ecto.Changeset.cast({data, types}, params, Map.keys(types)) which uses a custom validator to check the permitted date range. Then I add Map.put(:action, :validate).

Unfortunately after the time zone changes LiveView does not show the errors on my input type=date, until I manually click the date selector element. This is most likely a feature that validation is not shown until a user has edited an input field, however in my case this behaviour would be desired. It does not seem that the changeset is different after I click into the date field, so this seems to be tracked somewhere else in LiveView. How can I instruct liveview to show the errors for this field in the changeset?

EDIT: I found the mechanism using the phx-feedback-for-hook and the phx-no-feedback-class as documented on the Form bindings page. My workaround now is to not use the core component, but just past the content avoiding the phx-feedback-for. Not a nice solution though. How could this be done properly?

4 comments

/phoenix #input-validation #form-validation #liveview-form

0 1267 4

2023-07-11 01:51:05 UTC

Showing Posts 1 to 4

Show Best Posts
Show All (oldest first)
Show All (newest first)

KristerV

hey, welcome!

first tip i can give is that if you use mix phx.gen.live (docs) then there are a lot of hints of how to do stuff.

for your particular case i wonder what could be wrong since i’ve never had to wait for user interaction for the errors to show up. are you using the to_form() after the changeset and put-validate?

Post #1

FeeJai

Hello KristerV, thank you for your reply. Yes, I use the to_form. The behaviour I experience is intended by the liveview team and documented on hexdocs (see my edit above). I just wonder if there is a nice way to disable it in my edge case where it is not desired

Post #2

codeanpeace

def error(assigns) do
  ~H"""
  <p class="phx-no-feedback:hidden">
    <Heroicons.exclamation_circle mini class="mt-0.5 h-5 w-5 flex-none fill-rose-500" />
    <%= render_slot(@inner_block) %>
  </p>
  """
end
Now, any DOM container with the phx-feedback-for attribute will receive a phx-no-feedback class in cases where the form fields has yet to receive user input/focus. Using new CSS rules or tailwindcss variants allows you errors to be shown, hidden, and styled as feedback changes.

Based off the docs, you could also create a separate error component e.g. .eager_error that doesn’t use the :hidden tailwind variant appended to the phx-no-feedback LiveView class.

Another potential approach would be to add a label that conveys the permitted date range based on the chosen location. That way error handling for the date input can stay consistent with the other inputs.

And just for reference, here’s the logic for the phx-feedback-for class.
https://github.com/phoenixframework/phoenix_live_view/blob/ee515ccb06da284e49b9c5e60325deed79d09d82/priv/static/phoenix_live_view.js#L543-L552

Post #3