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?
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?
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
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.
