【61日目】【1日20分のRailsチュートリアル】【第7章】ユーザー登録のエラーメッセージを表示する

今日は「7.3.3 ユーザー登録のエラーメッセージ」から。

7.3.3 ユーザー登録のエラーメッセージ

ユーザー登録に失敗した場合の最後の手順として、問題が生じたためにユーザー登録が行われなかったということをユーザーにわかりやすく伝えるエラーメッセージを追加しましょう。
Railsは、このようなメッセージをUserモデルの検証時に自動的に生成してくれます。

自動的に！便利～。

$ rails console
>> user = User.new(name: "Foo Bar", email: "foo@invalid",
?>                 password: "dude", password_confirmation: "dude")
>> user.save
=> false
>> user.errors.full_messages
=> ["Email is invalid", "Password is too short (minimum is 6 characters)"]

英語しかないのかな。日本語あると日本向けサービス作るとき便利かも。

app/views/users/new.html.erb

<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(@user) do |f| %>
      <%= render 'shared/error_messages' %>

      <%= f.label :name %>
      <%= f.text_field :name, class: 'form-control' %>

      <%= f.label :email %>
      <%= f.email_field :email, class: 'form-control' %>

      <%= f.label :password %>
      <%= f.password_field :password, class: 'form-control' %>

      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation, class: 'form-control' %>

      <%= f.submit "Create my account", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>

formタグの最初に<%= render 'shared/error_messages' %> それぞれのフィールドにform-controlというクラスを追加。

ここでは、’shared/error_messages’というパーシャルをrender (レンダリング) している点に注目してください。
これはRails全般の慣習で、パーシャルは複数のコントローラにわたるビューに対し、専用のshared/ディレクトリを使用するようにしています(これは9.1.1で実現します)。

へ～。

ただし、今はまだapp/views/sharedといったディレクトリは作っていないので、表1.1で紹介したmkdirコマンドを使い、新しくディレクトリを作成する必要があります。

ディレクトリ作りました。

$ mkdir app/views/shared

パーシャルを作成して、下記の内容で更新。

$ touch app/views/shared/_error_messages.html.erb

app/views/shared/_error_messages.html.erb

<% if @user.errors.any? %>
  <div id="error_explanation">
    <div class="alert alert-danger">
      The form contains <%= pluralize(@user.errors.count, "error") %>.
    </div>
    <ul>
    <% @user.errors.full_messages.each do |msg| %>
      <li><%= msg %></li>
    <% end %>
    </ul>
  </div>
<% end %>

pluralizeの最初の引数に整数が与えられると、それに基づいて2番目の引数の英単語を複数形に変更したものを返します。

そんなメソッドあるの！すごい！英語ならではだなぁ。

リスト7.24には、エラーメッセージにスタイルを与えるためのCSS id error_explanationも含まれていることに注目してください。
（中略）
Railsは、無効な内容で送信がされて元のページに戻されると、divで囲まれたエラー用のCSSクラスfield_with_errorsを返します。

ほぅほぅ。そのクラスを活かしてCSS追加しましょう。

app/assets/stylesheets/custom.css.scss

  :
#error_explanation {
  color: red;
  ul {
    color: red;
    margin: 0 0 30px 0;
  }
}

.field_with_errors {
  @extend .has-error;
  .form-control {
    color: $state-danger-text;
  }
}