im3000

im3000

Surface - Set custom CSS error class for text inputs

Hello!

I am stuck figuring out how to set a custom CSS classes for text inputs in Surface. Basically, I would like to add a red border for the invalid text field. I can probably use class={invalid: @field_status}, but I am wondering if there is somehow a way to make this apply for all fields by creating some kind of helper or wrapper. For the reference, I am using Ecto and there are changesets involved for the forms in question.

Any help, pointers, links are much appreciated. Thank you!

Most Liked

im3000

im3000

Thank you for the answer @Malian!

As you suggested, I could probably get away with a derived input component. What I had in mind was a tighter coupling to Ecto changesets, but that coupling might be too tight. On the other hand all the information is already probably there.

The idea sparked after reading Dynamic forms with Phoenix « Plataformatec Blog post and especially the “Customizing Inputs” section. I am thinking if Surface has an Field tag that acts as a wrapper for inputs and error tags it might be quite easy to add an error CSS class to the inputs that the field is wrapping. With that said, I haven’t looked at the Surface’s code too close yet so take my thoughts with a pinch of salt.

What do you think? Is it doable or is it not in line with Surface’s design philosophy?

Where Next?

Popular in Questions Top

New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
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
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
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
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

9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30877 112
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
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
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
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
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