Error_tag not showing

umbra

Im having a problem here… as the title suggest, my error_tag isnt working, its simply not showing the error message:

new.html.eex

<%= form_for @changeset, Routes.category_path(@conn, :create), fn f -> %>
    <label for="category_name" class="form-label">Nome da Categoria</label>
    <%= text_input f, :name, class: "form-control", placeholder: "Nome" %>
    <%= error_tag f, :name %>
    <%= submit "Cadastrar", class: "btn btn-primary my-3" %>
<% end %>

controller

def create(conn, %{"category" => category}) do
    case Records.category_create(category) do
      {:ok, _inserted_category} ->
        conn
        |> put_flash(:info, "Categoria criada!")
        |> redirect(to: Routes.category_path(conn, :index))
      {:error, changeset} ->
        conn
        |> put_flash(:error, "Erro ao criar categoria!")
        |> render("new.html", changeset: changeset)
    end
  end

context

defdelegate category_changeset(category, params), to: Category, as: :changeset
defdelegate category_create(params), to: Category, as: :create

changeset and repo action

def changeset(%Category{} = category, params \\ %{}) do
    category
    |> cast(params, [:name])
    |> validate_required([:name])
    |> validate_length(:name, min: 3, max: 15)
    |> validate_format(:name, ~r{\S})
    |> unique_constraint(:name)
  end

  def create(params) do
    %Category{}
    |> changeset(params)
    |> Repo.insert()
  end

inspected changeset
Its working properly, the error is there!

[debug] Processing with ConfinWeb.CategoryController.index/2
  Parameters: %{}
  Pipelines: [:browser]
[debug] QUERY OK source="categories" db=15.0ms idle=407.0ms
SELECT c0."id", c0."name" FROM "categories" AS c0 []

#Ecto.Changeset<
  action: :insert,
  changes: %{},
  errors: [name: {"can't be blank", [validation: :required]}],
  data: #Confin.Records.Category<>,
  valid?: false
>

HTML generated

6 comments

/phoenix #error-messages

0 3876 6

2022-09-02 09:32:30 UTC

First 6 of 6 Posts

lleger

Is this in a LiveView? It looks like it because of the “invalid-feedback” class, which is added by LiveView when the user didn’t change the input. In your CSS that class probably has display: none or similar. This is to avoid confusing the user by adding errors to fields they haven’t changed.

Docs here: Form bindings — Phoenix LiveView v1.2.5

Post #1

umbra

Its not LiveView
This is supposed to happen only with LV?

Post #2

lleger

The default error_tag implementation adds the invalid-feedback class automatically. See here: phoenix/installer/templates/phx_web/views/error_helpers.ex at a55f4859aa028e7395b5b84ce0481ac4e5efb659 · phoenixframework/phoenix · GitHub

If you’re using that same function (you didn’t paste the code, so I’m not sure) then that class is being added.

Since it’s in the HTML and not showing, it’s possible you have some CSS that’s adding display: none. The default app.css Phoenix generates has this (phoenix/installer/templates/phx_assets/app.css at a55f4859aa028e7395b5b84ce0481ac4e5efb659 · phoenixframework/phoenix · GitHub) but that’s probably not activating since it doesn’t also have the phx-no-feedback class.

Which is what LV is supposed to do, as the linked docs explain. But if this isn’t a LV, then phx-no-feedback isn’t getting applied, so not sure. But I’d inspect the element in the browser to see why it’s being hidden.

Post #3

umbra

Ok, I think that I found the problem!
Im using Bootstrap 5, and happens that it uses a class named invalid-feedback too.

Thanks! I dindt knew that Phoenix uses a class with the same name.

Post #4

curioustolearn

I am having this same issue with bootstrap - no errors are being displayed. I am using Phoenix Liveview. For form fields that have not yet received any input I see both phx-no-feedback and invalid-feedback classes. As the fields receive input, the phx-no-feedback is removed from them. However, the invalid-feedback class remains. Am I not seeing the errors because of this class? How do I make sure that the errors are displayed? I would really appreciate some help on this.

Update: I also could not find where Phoenix sets the styling for phx-no-feedback and invalid-feedback classes.

Thank you!

Post #5

aywen

This is probably way too late, but in case someone else stumbles across this thread as well.

Possible causes of error tag not showing:

Check your changeset - does it actually contain errors?
Check DOM in browser and see if the field actually renders, but is hidden by invalid-feedback class… you might want to comment it out while debugging to make it easier. (The class will typically be defined in .css file in /assets/css/app.css )
Check which action is set on your changeset. If it is set to :nil or :ignore, error will not be shown. (See a note on errors in Phoenix.HTML.Form). If this is the case you can either use # {_reply, changeset} = Changeset.apply_action(changeset, :insert) or change the action field manually e.g. {:noreply, assign(socket, changeset: %{changeset | action: :insert})}.
`

Also, I’ve found a related post on the topic.

Post #6

— All posts loaded —