Yuki Matsumoto

To be engneer soon / Ruby on Rails

バリデーションを追加する

2019-02-19 Yuki MatsumotoRuby on Rails

現在新規投稿画面は値が空の状態でもpostができてしまうため、バリデーションを追加していきます。

バリデーションを追加

まずはapp -> models -> idea.rbからバリデーションを追加します。

class Idea < ApplicationRecord
  validates :title, presence: true
  validates :content, presence: true
end

これでtitleとcontentが入力されないとバリデーションエラーになる。試しにやってみたらデータベースへの値が確認できなかっため、保存されていないことが確認できる。

 (0.1ms)  begin transaction
  ↳ app/controllers/ideas_controller.rb:15
   (0.0ms)  rollback transaction
  ↳ app/controllers/ideas_controller.rb:15
Redirected to http://0.0.0.0:3000/ideas
Completed 200 OK in 4ms (ActiveRecord: 0.1ms)

flashを使ってエラーとサクセス時のメッセージを表示させる

せっかくバリデーションが作成できたのでエラーメッセージも追加したいなと思います。簡易的なメッセージを表示するにはflashを使います。イメージとしては値が入ってない時にエラーを吐き出し、投稿が成功した時にSuccessが表示されるようにします。

編集するファイルはideas.controller.rb

  def create
    @idea = Idea.new(idea_params)
    if @idea.save
      redirect_to ideas_path, notice: 'Success!'
    else
      flash[:alert] = 'Save error!'
      render :new
    end
  end

@ideaがsaveされたら、投稿一覧ページに戻りsuccessが表示され、投稿が失敗する(値が何もない場合)とSave error!を表示するための指示がコントローラーで設定できました。

次に実際にメッセージを表示させるたの要素を設置します。各画面で共通に使うため、app -> views -> layouts -> application.html.erbを編集していきます。

<!DOCTYPE html>
<html>
  <head>
    <title>ProgressList</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div class= "container">
      <% if flash[:notice] %>
        <p class="text-success"><%= flash[:notice] %></p>
      <% end %>
      <% if flash[:alert] %>
        <p class="text-danger"><%= flash[:alert] %></p>
    <%= yield %>
    </div>
  </body>
</html>

実際に試してみると以下のようにちゃんとメッセージが表示されいてることが確認できました。

成功した場合 image1

失敗した場合 image2

これで成功時と失敗時のアラートを吐き出すことができるようなりました。