Using phx-click inside LiveView form reveals all error messages

Hi,

I have a form with a custom LiveView calendar component. I pass in a changeset which works nicely - the form shows real-time error messages only after the user has interacted with the form field. The problem I have is that when I interact with the calendar and send an event to the server, all error messages suddenly show on the form.

Is this normal behaviour? Is it not possible to send events using phx-click etc from within forms that depend on changesets?

I created a repo with a clean Phoenix project and the most minimal code required to demonstrate my issue: Click event triggers show error messages · davemccrea/20220311_elixirforum@e6023d4 · GitHub

Thanks!

Seems like this is proper behavior. You’re assigning a changeset to the socket after the click event. The changeset has errors, thus Live View renders them. If you just want to click, you don’t need to assign the changeset (and arguably you shouldn’t do that expect on the phx-change event).

After some more testing, it appears that even adding a simple <button>Click me</button> within a LiveView form causes the form to be submitted when clicked. Adding <button type="button">Click me</button> resolved the issue for me.

Ah, I see now that you but a button inside form which in HTML is always going to submit the form. Try using an a instead.

1 Like

This is default behaviour. The HTML spec for the button element specifies

The missing value default and invalid value default are the Submit Button state.

So if no button or reset type is specified, it’s a submit.

1 Like