mwmiller

mwmiller

Form validation patterns in Hologram

I tried this out and it works great! Except for that it exposes a problem I had before with the $blur event.

My site has a form which includes user-enterable numeric strings. These are sent to the server for validation and then new data is presented. I don’t have a submit button or anything, it’s just “magic.”

I initially tried to use $blur events to avoid sending on each keystroke, waiting for the user input to appear complete. However, I couldn’t figure out how to get the value of the input therewith. So I moved to $change and chalked it up to my ignorance.

With the above version, I now get crazy responsive stuff with each keystroke… but this makes it impossible to enter a long number because it’s already validated, returned and changed in the very box in which I am typing.

I’ve learned a lot since I first started this (thanks!), so I tried $blur again with high hopes. Not so much. I put in a debug command called from the $blur-fired action:

Debug command received: %{event: %{}}

So, I know a particular input has blurred and I should check its value, but I don’t get this value in the event. Should I be doing something in the action to extract the input value from the component?

Most Liked

bartblast

bartblast

Creator of Hologram

@mwmiller That part about “crazy responsive stuff with each keystroke” honestly sounds like it could be a Hologram advertisement! :rofl: But I understand the UX concern you’re raising.

Here are the key technical facts about Hologram’s event system:

Synthetic Events: Hologram uses synthetic events (similar to React). For example, $change maps to the native input event, not the native change event.

Form-level vs Field-level Events: The $change event behaves differently depending on where you put it:

  • On a text input: triggers on every keystroke (maps to input event)
  • On a form: behaves like the native change event - typically triggers when a field loses focus

$blur Events: These map directly to native blur events and can be triggered on many element types (links, buttons, etc.), not just form elements. That’s why they don’t include a value property - it wouldn’t make sense for non-form elements.

Client-side Validation: Here’s the key architectural point - you don’t need to go through the server for initial validation! Hologram runs Elixir in the browser, so you can do validation client-side. Your validation code will be isomorphic - the same Elixir validation logic (including Ecto changesets) can run both client-side and server-side. You should still validate server-side as a security measure and for data integrity (e.g., when saving to database, checking business rules, ensuring referential integrity), but the initial user feedback can be immediate and local.

Suggested Pattern: For your use case, try this approach:

  1. Use $change event on your input field to sync the value with your component state instantly only if you need to use that value elsewhere in your component or modify it through other actions - otherwise, you can skip this step since the form’s $change event will include all current form field data
  2. Use $change event on the form element to trigger validation when the user stops inputting (e.g., when the field loses focus)
  3. Run your validation logic client-side for immediate feedback
  4. Validate again server-side when actually persisting the data
garrison

garrison

There is a very particular “genre” of mistake you’re probably making here, but instead of trying to explain it I will just link this article which goes over it in enormous detail:

This is somewhat off-topic (as I alluded to earlier in the thread, this is an interface design problem), but maybe you will find it helpful.

mwmiller

mwmiller

Just a minor update, to sort of close the loop.

I am now using Hologram 0.6.2. Today I implemented an intent system and it’s working well. I do still have some kinks to work out based on my particular domain. In any case, I wanted to thank everyone in the thread here for their time and guidance.

Where Next?

Popular in Questions Top

senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
JDanielMartinez
Hi! May someone helps me, please! I have two apps into an umbrella project: the first one is Database, which manages queries, and the se...
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" => #BSON.ObjectId<58eb1a7a9ad169198c3dXXXX>, "email" => ...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

Other popular topics Top

chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New

We're in Beta

About us Mission Statement