前回の記事では確認ページ付きのメッセージ送信フォームを実装しました。https://remonote.jp/rails-confirm-form
本記事ではそのフォームをsimple_form、 bootstrap-sassで作り込み、バリデーションのエラーメッセージをrails-i18nで日本語化します。
Simple form
https://github.com/plataformatec/simple_form
Bootstrap for Sass
https://github.com/twbs/bootstrap-sass
Rails i18n
https://github.com/svenfuchs/rails-i18n
環境はこちらです
|
1 2 |
ruby 2.4.0 rails 5.1.6 |
準備
Gemfile
|
1 2 |
gem 'simple_form' gem 'bootstrap-sass' |
$ bundle install を実行
application.cssの方はScssを使うのでリネームします。
application.css => application.scss （application.css.scssとしてもOK！）
|
1 2 |
@import "bootstrap-sprockets"; @import "bootstrap"; |
|
1 |
//= require bootstrap-sprockets |
Install
simple_formのインストールにbootstrapオプションをつけます。（bootstrapを使わない場合は–bootstrapは不要）
|
1 |
$ rails generate simple_form:install --bootstrap |
simple_form_for
simple_form導入前のviewsはこちらでしたが、、、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<%= form_for(@message, url: { action: :confirm }) do |f| %> <div> <h2>メッセージフォーム</h2> <div> <strong>名前</strong> <p><%= f.text_field :name %></p> </div> <div> <strong>メールアドレス</strong> <p><%= f.text_field :email %></p> </div> <div> <strong>内容</strong> <p><%= f.text_area :content %></p> </div> <%= f.submit %> </div> <% end %> |
simple_form_forに変えて、だいぶスッキリしました！
|
1 2 3 4 5 6 7 |
<%= simple_form_for(@message, url: { action: :confirm }) do |f| %> <h2>メッセージフォーム</h2> <%= f.input :name %> <%= f.input :email %> <%= f.input :content %> <%= f.button :submit %> <% end %> |
simple_formのoption
いろいろとオプションをつけていきます。 file_fieldにはas: :fileです。
|
1 2 3 4 5 6 7 |
<%= simple_form_for(@message, url: { action: :confirm }) do |f| %> <h2>メッセージフォーム</h2> <%= f.input :name, label: "名前", placeholder: "20文字以内" %> <%= f.input :email, label: "メールアドレス", placeholder: "30文字以内" %> <%= f.input :content, as: :text, label: "内容", placeholder: "200文字以内" %> <%= f.button :submit, "確認画面へ", :class => "btn-primary" %> <% end %> |
はい、こんな感じになりました。
simple_formのvalidation error
モデルにバリデーションを指定して、エラーメッセージを出します。
今回はDBを使わずActiveModelを使っています。
|
1 2 3 4 5 6 7 8 9 10 |
class Message include ActiveModel::Model attr_accessor :name, :email, :content validates :name, presence: true, length: { maximum: 20 } VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i validates :email, presence: true, length: { maximum: 30 }, format: { with: VALID_EMAIL_REGEX } validates :content, presence: true, length: { maximum: 200 } end |
エラー時のスタイルを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.simple_form { width: 50%; margin: 0 auto; .form-group-invalid { label { color: red; } .form-control { border: 1px solid red; } .invalid-feedback { color: red; } } } |
エラーを出してみるとこのようになります。
i18nで日本語化
エラーメッセージの日本語化をするには、Railsにデフォルトで入っているrails-i18nというライブラリを使います。
config.i18n.default_locale = :jaを以下のあたりに記述します。
|
1 2 3 4 5 6 7 8 9 |
module Remonote class Application < Rails::Application config.load_defaults 5.1 config.i18n.default_locale = :ja end end |
modelのカラム名は、ymlファイルに書いていきます。注意点として、今回はactivemodelを使っているところです
|
1 2 3 4 5 6 7 8 9 10 11 |
ja: activerecord: attributes: user: name: 名前 activemodel: attributes: message: name: 名前 email: メールアドレス content: 内容 |
サーバーを再起動させて、もう一度エラーを出してみると、、、
できました！以上です！
ご覧いただき、ありがとうございました！😀
