form_withを使ったフォームの送信時のアラートをI18n対応させる方法

解説する内容

・form_withで作成したフォームの送信時に「本当に登録してもいいですか？」的なアラートを表示させる。
・その表示させたアラートをI18n対応させて翻訳可能にする。

ログアウト時などにアラートを表示させる方法は多々見かけましたが、フォーム送信時はあまり見かけなかったので備忘録として残しておきます。

simple_formを使用している場合も同じ手順で実装できます。

フォームの実装

今回は単純なユーザー登録画面を例に実装していきます。

View

view.html.erb

<%= form_with(model: @user, local: true) do |form| %>
  <%= form.text_field :username %>
  <%= form.text_field :password %>
  <%= form.submit "登録" %>
<% end %>

コントローラーは今回は全くいじらないので、省略します。

送信前にアラートを表示させる

submitボタンにdata: { confirm: "アラートで表示させたい内容" }オプションを設定することでアラートを表示できます。

view.html.erb

<%= form_with(model: @user, local: true) do |form| %>
  <%= form.text_field :username %>
  <%= form.text_field :password %>
  <%= form.submit "登録", data: { confirm: "本当に登録してもいいですか？" } %>
<% end %>

I18n対応させてアラートを翻訳可能にする

では続いて表示されるアラートの文字をI18n対応させていきます。
これまた単純です。

view.html.erb

<%= form_with(model: @user, local: true) do |form| %>
  <%= form.text_field :username %>
  <%= form.text_field :password %>
  <%= form.submit "登録", data: { confirm: I18n.t("alert.are_you_sure?") } %>
<% end %>

data: { confirm: confirm: I18n.t("alert.are_you_sure?") }
このように変更して、
alert.are_you_sure?の部分にパスを指定してあげればOK。
以上になります！

間違い等あればご指摘いただけると助かります！

参考記事