Invalid-feedback not working

Phoenix Forum Questions / Help
,
1

I’m following documentation phx-feedback-for since I have:

Failing to add the phx-feedback-for attribute will result in displaying error messages for form fields that the user has not changed yet (e.g. required fields further down on the page).

And I tried exactly as documentation states, and some variation but did not achieved the desired result, i.e. error messages stll appear for unchanged fields.

Inspection of error tags after I make a change in the first field:

error user_last_name: {:safe,
 [
   60,
   "span",
   [
     [32, "class", 61, 34, "invalid-feedback", 34],
     [32, "phx-feedback-for", 61, 34, "last_name", 34]
   ],
   62,
   [[[], "can" | "'"] | "t be blank"],
   60,
   47,
   "span",
   62
 ]}
error user_email: {:safe,
 [
   60,
   "span",
   [
     [32, "class", 61, 34, "invalid-feedback", 34],
     [32, "phx-feedback-for", 61, 34, "email", 34]
   ],
   62,
   [[[], "can" | "'"] | "t be blank"],
   60,
   47,
   "span",
   62
 ]}
error user_terms_conditions: {:safe,
 [
   60,
   "span",
   [
     [32, "class", 61, 34, "invalid-feedback", 34],
     [32, "phx-feedback-for", 61, 34, "terms_conditions", 34]
   ],
   62,
   "must be accepted",
   60,
   47,
   "span", 
   62
 ]}

How it looks:
Screenshot_2021-01-17_11-13-32

In this example I used phx_feedback_for: field but I also tried phx_feedback_for: input_name(form, field) as stated in documentation and similar but that’s obviously not the issue.

What am I missing here?

2

Do you include the necessary css to hide those error messages? The error tags themselves are still meant to be rendered. Just to be hidden by css.

3

Yes, as it is stated in documentation, I added

.phx-no-feedback.invalid-feedback, .phx-no-feedback .invalid-feedback {
  display: none;
}

in to app.scss file. I also made rm -rf node_modules and npm i in assets just in case.

I lack knowledge so I’m not sure how is it triggered. Could I make something custom like?

4

Try to use the devtools to assert if the css rules are available as well as if your error messages (or their parent) do get the .phx-no-feedback class applied.

5

Thanks for the advice, I haven’t thought of utilizing devtools. Should have known better.
Code:

  def error_tag(form, field) do
    Enum.map(Keyword.get_values(form.errors, field), fn error ->
      field_name = field |> Atom.to_string() |> String.capitalize() |> String.replace("_", " ")

      content_tag(:span, "#{field_name} #{translate_error(error)}",
        class: "block mt-1 text-sm text-red-700",
        phx_feedback_for: input_name(form, field)
      )
      |> IO.inspect(label: "error #{input_id(form, field)}")
    end)
  end

devtools:

<span class="block mt-1 text-sm text-red-700 phx-no-feedback" phx-feedback-for="user[last_name]">Last name can't be blank</span>

It seems to me that the class is applied.? But to no effect…

6

The css is for .phx-no-feedback.invalid-feedback, .phx-no-feedback .invalid-feedback where .invalid-feedback is meant to be the class your error helpers render with. In the docs:

content_tag(:span, translate_error(error),
      class: "invalid-feedback",
      phx_feedback_for: input_name(form, field)
    )
7

Yes. I already achieved this previously but thought it wasn’t good. But now I see that it is. It’s still not perfect but I think I can manage from here. Thank you for the guidance. Often my inexperience casts doubt which in turn leads me on a wrong path even when I’m on a good one. It’s good to reach out then, but since it’s weekend I couldn’t nag my coworkers so I made my first post here and I’m glad I did. :slight_smile: