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.

mwmiller

mwmiller

I did find it helpful, thank you! I started out feeling vaguely insulted and ended up feeling fairly enlightened. Thank you again.

sodapopcan

sodapopcan

You got garrison’d :rofl:

Good article, though.

As another totally off-handed remark: from that article, Vim calls the field that tracks where the cursor should land on shorter lines curswant which I find oddly adorable.

Where Next?

Popular in Questions Top

srinivasu
How to handle excepions in elixir? Suppose i have A, B, C ,D, E modules. and each module has get() function. A.get() method will call th...
New
yawaramin
In the Dialyzer docs ( http://erlang.org/doc/man/dialyzer.html#requesting-or-suppressing-warnings-in-source-files ), there is a way to tu...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set? Thanks.
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
makeitrein
Hey all, just started picking up Elixir last week and am writing a scraper as a learning project. Baby step #1 is extracting the number ...
New
chensan
I have a User schema with a :from_id field set to type :string: defmodule TweetBot.Repo.Migrations.CreateUsers do use Ecto.Migration ...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
chewm
Hi guys, nice to meet you to the whole forum, I’m new here, I’m trying to configure visual studio code for elixir, right now the intellis...
New

Other popular topics Top

yurko
Here are few pieces of (common) Linux knowledge that we use for reasonably small one server apps. We use Ubuntu but this should work for ...
New
srinivasu
How to handle excepions in elixir? Suppose i have A, B, C ,D, E modules. and each module has get() function. A.get() method will call th...
New
lk-geimfari
What is most correct way to open, read and parse JSON file with poison? For example if we have example.json file in root of some projec...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 42633 214
New
johnnyicon
Hi all, I've just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I'm trying to use Postg...
New

We're in Beta

About us Mission Statement