How to translate Phoenix default error message when `email_input` from a form is empty?

I have the following form:

<%= form_for @conn, Routes.auth_path(@conn, :request, "passwordless"), [method: :get], fn f -> %>
<%= hidden_input f, :redirect_url, value: Routes.page_path(@conn, :login_mail_sent) %>
<%= email_input f, :email, placeholder: "Your email address", required: :true %>
<%= submit "Log in" %>
<% end %>

Now if I try to submit the form with the email field input empty, I’ll get a small error bubble from Phoenix with something saying: “Please, fill out this field.”

Could anyone please tell me how can I translate this error message?

I know I can use gettext but I do not understand where should I call the gettext function since the string “Please fill out this field” is not written anywhere in the code.

That bubble message you get is not from Phoenix, but from your browser (if you remove required: :true, you will get Phoenix’s message which is can't be blank)

For the Phoenix error messages, check priv/gettext/errors.pot

1 Like

@sfusato thanks for the info!

I decided to change the default browser message thanks to this stackoverflow post.

oninvalid only seems to have ~38% global coverage according to

You’re better off simply providing a translated title attribute for the element. Much simpler and works well.

What do you mean exactly?

If I write:

<%= email_input f, :email, placeholder: "Your email address", required: :true, title: "Veuillez fournir votre adresse Mail" %>

It still displays the English warning “Please fill out this form”.

It shouldn’t say that at all, I guess you have a validation form error raised earlier than before the browser can yell at you for an invalid email field.

When I remove the required: :true option, I don’t get the can't be blank message that @sfusato mentionend; hence why I decided to write some small javascript.

That might be the reason why also the title property does not work?

Also this form is not used to create a user, it is mostly for login so it has nothing to do with Ecto (who, as far as I know, usually displays those error this field can't be blank type of message).

Very likely. For title to work you need not to intercept and process JS events for the element in question.

If that’s not okay then I am afraid you’ll have to go all the way with JS.

Do you have :email in the validate_required([:email]) changeset function?

You can still use Changesets even without a schema: check Schemaless Changesets

No actually I do not use a changeset at all, just the @conn.

I’ll look into how to implement a schema less changeset.
Thanks for the tip one again.

1 Like