Tailwind CSSでRailsのエラーメッセージをフォームの下に表示する方法

株式会社TECH LUCKという会社で代表兼エンジニアをしている齊藤です。

DXプロジェクト、開発プロジェクト、Rails開発などでお困りごとがありましたら弊社HPからご相談をいただけますと幸いです。
以下のようなお悩みを解決できます。

• プロジェクトでRailsエンジニアが足りなくて困っている
• Railsのバージョンアップをしたいがノウハウ・リソースが足りなくて困っている
• オフショア開発をしているが、要件の齟齬やコード品質が悪いので改善したい

また、Railsエンジニアも募集しておりますので、興味がありましたら弊社HPからご連絡いただけますと幸いです。

前提

Rails7.1でCSSにTailwindを利用している際に、フォームの下にエラーメッセージを出したいと思ったときがありました。
その時に実装した内容を書き出します。

実装したら以下のようなデザインと動きになります。

実装方法

エラーメッセージを表示するために、views/shared/_error_message.html.erb というファイルを作ります。

views/shared/_error_message.html.erb

<% if model.errors[attributes].present? %>
  <% model.full_messages_for[attributes].each do |error_message| %>
    <p class="text-red-500 text-xs italic"><%= error_message %></p>
  <% end %>
<% end %>

以下のような形でエラーメッセージを表示したいフォームの下にデザインを組み込みます。

new.html.erb

<div class="mt-2">
  <%= f.text_field :content, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6" %>
  <%= render 'shared/error_message', model: @post, attributes: :content %>
</div>

また、Rails7.1ではTurboを利用しているため、createアクションでは render :new, status: :unprocessable_entity という記述を忘れないようにしましょう。
これを忘れるとエラー表示がされないので注意が必要です。

posts_controller.rb

class PostsController < ApplicationController
  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)

    if @post.save
      redirect_to root_path
    else
      render :new, status: :unprocessable_entity # これが大事
    end
  end

  private

  def post_params
    params.require(:post).permit(:content)
  end
end

以上です。