エラーメッセージを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 |
Scaffold
本記事ではサンプルとして新規プロジェクトを作るところから進めていきます。
|
1 2 3 |
$ rails new devise $ cd devise $ rails g scaffold User name:string |
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 4 5 6 7 |
*= require validationEngine.jquery *= require_tree . *= require_self */ @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
以上です。ご覧いただき、ありがとうございました！😊
