【簡単】railsでbootstrapを用いたエラーメッセージを表示する

記事投稿の背景

オリジナルサービスの投稿フォームを作成していたところ、投稿内容が空白だった場合にエラー表示をさせる方法が分からなかったが、調べてみると簡単に実装できたので共有させていただきます。

環境

ruby 2.7.2
rails 6.1.2
bootstrap導入済み

実装

views/posts/new.html.erb

<%= form_for @post do |f| %>
  <div class="field">
    <h3>新規投稿</h3>    
     <p>投稿内容：</p>
     <%= f.text_area :body %>
  </div>
  <%= f.submit "投稿する" %>
<% end %>

上のような投稿フォーム上で、投稿内容が空だった場合エラーメッセージを表示させます。

models/post.rb

belongs_to :user
#ここに追記
validates :body, presence: true

validates :body, presence: trueとすることにより、空の投稿内容が認められないように設定します。

controllers/posts_controllers.rb

def create
    @post = Post.new(post_params)
    @post.user_id = current_user.id
    if @post.save
      redirect_to :action => "index"
    #ここに追記。エラー時に行われる処理
    else
      render action: :new
    end
　　#終了
  end

投稿内容が保存されなかった場合（投稿内容が空だった場合）、postsのnewでアクションが行われるように設定します。

views/posts/new.html.erb

<%= form_for @post do |f| %>
  # ここに追記
  <% if @post.errors.any? %>
    <div class="alert alert-danger" role="alert">投稿内容を入力してください</div>
  <% end %>
  # 終了
  <div class="field">
    <h3>新規投稿</h3>    
     <p>投稿内容：</p>
     <%= f.text_area :body %>
  </div>
  <%= f.submit "投稿する" %>
<% end %>

フォーム内に、@post.errors.any?設置することにより、エラーの時のみ中身が発火するようにします。

<div class="alert alert-danger" role="alert">はbootstrapで用意されたアラートのデザインです。他の色もあるので、何か処理が成功したときのアラート等にも使えます。

以上で、エラー表示を簡単に実装することが出来ました！！！

参考記事