フォームを動的なバリデーション

せっかくフォームに入力したのに送信を押してからエラーが出るようだと少しイラっとするものです。
「また入れるのかよ・・・」みたいな感じで。

動的なバリデーションを行えると入力しているときにチェックしてくれるのでUXが向上します。

今回RailsでjQuery-Validation-Engine-rails導入したのですが、その時のメモです。

jQuery-Validation-Engine-railsの使い方＆まとめ

大体これの通りにやっていればできました。
Gemfile に書いてbundle install

gem 'jQuery-Validation-Engine-rails'

application.css

*= require validationEngine.jquery

application.js

//= require jquery.validationEngine-en
//= require jquery.validationEngine

セレクトボックスで試しに実装した時はこんな感じで作ってました。
アイテムは何かしら選ばないといけない感じです。

show.html.erb

<%= form_with model: Item.new, id: "my_form" do |f| %>
 <%= f.select :item_id, @all_items.map{|t| [t.name, t.id]}, {include_blank: true}, class: "validate[required]" %>
 <%= f.submit "送信" %>
<% end %>

<script>
  $(document).ready(function(){
      $("#my_form").validationEngine();
  });
</script>

エラーメッセージ日本語化

https://github.com/posabsolute/jQuery-Validation-Engine/blob/master/js/languages/jquery.validationEngine-ja.js
ダウンロードしてapp/assets/javascripts/ 配下に配置。
これだけだとできないので

application.js

//= require jquery.validationEngine-ja

にして読み込んでもらう。

参考記事

【Rails】Deviseのsign_upフォームにjQuery-Validation-Engine-railsを導入する
 jQuery-Validation-Engine-railsの使い方＆まとめ