Premium Tutorial. Learn Stripe Subscription with Phoenix LiveView

Read more


Quicktip: Customize look of form validation in Phoenix

This post was updated 01 May - 2020


When submitting a form in a Phoenix and get validation errors, you are displayed with a little validation error text. However, you probably want to customize how that error message is displayed. For example, what I don’t like is that it just say

can't be blank

And also, the class that is attached is not compatible with Tailwind or Bootstrap. So, for my use case I want it to have both the field name attached and some Tailwind classes.

To accomplish that, you can do that in the file: lib/tutorial_web/views/error_helpers.ex

So, out of the box, the code looks something like this:

  def error_tag(form, field) do, field), fn error ->
      content_tag(:span, translate_error(error), class: "help-block")

And change it to something like this:

  def error_tag(form, field) do, field), fn error ->
      field = field |> Atom.to_string() |> String.capitalize()
      content_tag(:span, "#{field} #{translate_error(error)}", class: "block mt-1 text-sm text-red-700")


What are you working on?

If you want, you can send me a link to your Phoenix or Phoenix LiveView project so. Lets connect on Twitter or Linkedin.

- Andreas Eriksson, web developer since 2005

Related Tutorials

Published 14 Feb - 2020

Improving LiveView UX with Phoenix Channels - Tagging part 3


In the previous tutorial I set up the tagging interface. It had however a small issue. If I added a tag, it didnt really refocus on the input so I n..

Published 13 Feb - 2020

Tagging interface with Phoenix LiveView and Tailwind - Tagging part 2


In the previous tutorial, I set up the the backend for being able to add tags to products. I have also written a tutorial about adding a LiveView an..