jquery_validate_engine_railsを使ってフォームのバリデーションチェックする
手順
１、gem 'jQuery-Validation-Engine-rails'をインストール。
gem 'jQuery-Validation-Engine-rails'
$ bundle install
２、application.cssとapplication.jsに以下を追記。
# application.css.scss
path /app/assets/stylesheets/application.css.scss
下記を追記
*= require validationEngine.jquery
エラーメッセージを日本語化にするため、下記URLからフォルダをダウンロード
その中のjquery.validationEngine-ja.jsというファイルだけ、app/assets/javascriptsの下に置く。(他のファイルは使わない）
https://github.com/posabsolute/jQuery-Validation-Engine
// path app/assets/javascripts/application.js
下記を追記
//= require jquery.validationEngine-en
//= require jquery.validationEngine
//= require jquery.validationEngine-ja.js
３、application.htmlのbody閉じタグ直前に下記を追記し、jQueryを読み込む。
<body>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#validate_id").validationEngine();
});
</script>
</body>
上記、
jQuery("#xxxxxx")
この()内のセレクタと、次のform_forに設定するidとを一致させると、フォームの入力を検知してバリデーションが機能するようになる。
idをセレクタに指定する場合は先頭に#をつける。
４、form_forに上記セレクタと同じidを設定。
<%= form_for(@sample, url: sample_path(id: id), html: { id: "validate_id" }) do |f| %>
<%= f.select :decisions, Sample.decisions, { include_blank: true, selected: 0 }, class: "validate[required]" %>
<%= f.submit '変更を送信する', class: 'btn btn-primary' %>
<% end %>
selectのclassに、"validate[required]"を指定すると、必須入力になります。
これで空白のまま送信ボタンを押すと、下記のようにバリデーションがかかるようになります。
補足
form_forのオプションに html: { id: XXXXXXX }と渡さないと、動きませんでした。
html: とするのがポイント。
単に { id: XXXXXX }では動かなかった）
include_blank: trueはプルダウンの先頭に空白を作ります。
selected: 0 は、指定したプルダウン内の要素をデフォルト値にします。
配列の先頭は[0]、そして上記で空白を先頭に追加しているので、このプルダウンは空白がデフォルトになります。
参考
jQuery Validation Engineを利用する - Qiita
https://qiita.com › jQuery