2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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

#環境
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で用意されたアラートのデザインです。他の色もあるので、何か処理が成功したときのアラート等にも使えます。

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

#参考記事
https://blog.yuhiisk.com/archive/2018/05/22/rails-display-error-message.html

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?