エラーメッセージ
ユーザー登録の失敗によるエラーメッセージを表示させよう。
Userコンソールを使い、誤ったユーザー情報を入力してみよう。
>> user = User.new(name: "Foo Bar", email: "foo@invalid",
?> password: "dude", password_confirmation: "dude")
(1.6ms) SELECT sqlite_version(*)
=> #<User id: nil, name: "Foo Bar", email: "foo@invalid", created_at: nil, updated_at: nil, password_digest: [FILTERED]>
>> user.save
(0.1ms) begin transaction
User Exists? (0.8ms) SELECT 1 AS one FROM "users" WHERE "users"."email" = ? LIMIT ? [["email", "foo@invalid"], ["LIMIT", 1]]
(0.1ms) rollback transaction
=> false
>> user.errors.full_messages
=> ["Email is invalid", "Password is too short (minimum is 6 characters)"]
すぐにエラーメッセージが表示された。
パスワードが短すぎるらしい。
エラーメッセージを入力させるためにHTMLを作成する
ユーザー登録失敗時にエラーメッセージが表示されるようにする
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_with(model: @user, local: true) 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' %>
<!--email-->
<%= 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>
'shared/error_messages' はまだ作っていない。
のでこれから作成する。
mkdir app/views/shared
新しくファイルを作成
ubuntu:~/environment/sample_app (sign-up) $ c9 open _error_messsages.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") %>.
<!--@user.errors.countはエラーの回数-->
<!--pluralizeは引数が出力される-->
<!--エラーの回数と"error"の文字列が表示される-->
</div>
<ul>
<% @user.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
第一引数に基づいて第二引数が複数形になる。
引数が出力されるらしい。
>> helper.pluralize(1, "error")
=> "1 error"
>> helper.pluralize(5, "error")
=> "5 errors"
エラーメッセージにスタイルを与えるためのCSS
app/assets/stylesheets/custom.scss
/* forms */
.
.
.
# error_explanation {
// エラーメッセージにスタイルを与えるため
color: red;
ul {
color: red;
margin: 0 0 30px 0;
}
}
.field_with_errors {
// field_with_errorsを持ったdivタグでエラー箇所を自動的に囲んでくれます。
@extend .has-error
// @extend関数を使ってBootstrapのhas-errorというCSSクラスを適用
.form-control {
color: $state-danger-text;
}
エラーの数だけメッセージを表示する。
第一引数に基づいて第二引数が複数形になる。
無効なユーザー登録情報を送信したときのエラーメッセージが分かりやすくなります
ユーザー登録フォームで空のパスワードを入力すると2つの同じエラーメッセージが表示されてしまいます。
まだ工夫が必要なようだ。
演習
1.最小文字数を5に変更すると、エラーメッセージも自動的に更新されることを確かめてみましょう。
user.rb
class User < ApplicationRecord
before_save { email.downcase! }
# データベースに保存する前に処理をする。
# 入力されたメールアドレスを小文字にする。
validates :name, presence: true, length: { maximum: 50 }
#属性はname,属性の存在を検証、 最大50字まで
VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i
validates :email, presence: true, length: { maximum: 255 },
#最大255字まで
format: { with: VALID_EMAIL_REGEX },
uniqueness: true
#???
has_secure_password
#セキュアなパスワードの実装
validates :password, presence: true, length: { minimum: 5 }
# パスワードのバリデーションの設定
# 最低は六文字
end
test "password should have a minimum length" do
@user.password = @user.password_confirmation = "a" * 4
# 文字が五文字
assert_not @user.valid?
# このパスワードも認められないよね？
end
end
プレビューを確認
Password is too short (minimum is 5 characters) を表示された。
2.未送信のユーザー登録フォーム（図 7.13）のURLと、送信済みのユーザー登録フォーム（図 7.19）のURLを比べてみましょう。なぜURLは違っているのでしょうか? 考えてみてください。
未送信登録フォーム
https:#####.com/signup
送信済み登録フォーム
https:######.com/users
signupとusersの違いがある。