エラーメッセージをPost送信する前に、ユーザーに知らせるために、本記事では ‘jQuery-Validation-Engine-rails’ を導入します。ユーザ認証機能には ‘devise’、CSSフレームワークには’devise-bootstrap-views’を使っています。
jQuery.validationEngine
https://github.com/posabsolute/jQuery-Validation-Engine
Devise
https://github.com/plataformatec/devise
Devise Bootstrap Views
https://github.com/hisea/devise-bootstrap-views
環境はこちらです
|
1 2 3 4 5 |
ruby 2.4.0 rails 5.1.6 devise 4.4.3 devise-bootstrap-views 0.0.11 jQuery-Validation-Engine-rails 0.0.2 |
Gemfile
|
1 2 3 4 5 |
gem 'devise' gem 'devise-bootstrap-views' gem 'bootstrap-sass' gem 'jQuery-Validation-Engine-rails' gem 'jquery-rails' |
以下のコマンドでdeviseのインストールから、セットアップまで行います。
|
1 2 3 4 5 |
$ bundle install $ rails g devise:install $ rails g devise User $ rails db:migrate $ rails g devise:views:bootstrap_templates |
Assets
必要なアセットを読み込ませていきます。
app/assets/stylesheets/application.scss
|
1 2 3 |
@import "bootstrap-sprockets"; @import "bootstrap"; @import "devise_bootstrap_views"; |
app/assets/javascripts/application.js
|
1 2 3 4 |
//= require bootstrap-sprockets //= require jquery.validationEngine-en //= require jquery.validationEngine //= require jquery |
jQuery
基本形はこちらですが、その他オプションはドキュメントをどうぞ。
|
1 2 3 |
$(document).ready(function(){ $("#validate_id").validationEngine(); }); |
Views
フォームにidを設定し、それぞれの入力フィールドにバリデーションを設定していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<%= bootstrap_devise_error_messages! %> <div class="panel panel-default devise-bs"> <div class="panel-heading"> <h4><%= t('.sign_up', default: 'Sign up') %></h4> </div> <div class="panel-body"> <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { role: 'form', :id => "validate_id" }) do |f| %> <div class="form-group"> <%= f.label :email %> <%= f.email_field :email, autofocus: true, class: 'form-control validate[required, custom[email], maxSize[20]]' %> </div> <div class="form-group"> <%= f.label :password %> <%= f.password_field :password, class: 'form-control validate[required, minSize[6], maxSize[20]]', id: "passwd" %> </div> <div class="form-group"> <%= f.label :password_confirmation %> <%= f.password_field :password_confirmation, class: 'form-control validate[required, equals[passwd]]', id: "re_passwd" %> </div> <%= f.submit t('.sign_up', default: 'Sign up'), class: 'btn btn-primary' %> <% end %> </div> </div> <%= render 'devise/shared/links' %> |
ちなみにsimple_formを使っている場合は、このような感じなるかと思います。
|
1 2 3 4 5 6 7 8 9 |
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { role: 'form', :id => "validate_id" }) do |f| %> <%= f.input :email, label: "メールアドレス", input_html: {class: 'validate[required, custom[email], maxSize[20]]'} %> <%= f.input :password, label: "パスワード", input_html: {class: 'validate[required, minSize[6], maxSize[20]]', id: "passwd"} %> <%= f.input :password_confirmation, label: "確認用パスワード", input_html: {class: 'validate[required, equals[passwd]]', id: "re_passwd"} %> <%= f.button :submit %> <% end %> |
あとはhttps://localhost:3000/users/sign_upにアクセスして、動作を確認して下さい。
エラーメッセージの日本語化
jQuery-Validation-Engine-railsのエラーメッセージの日本語化は、次のリンクから「jquery.validationEngine-ja.js」をダウンロードして app/assets/javascripts/ 配下に配置します。
https://github.com/posabsolute/jQuery-Validation-Engine/blob/master/js/languages/jquery.validationEngine-ja.js
以上です。ご覧いただき、ありがとうございました！😊
