Step by Step!

logicbaseのブログ

jquery-validation-railsを使う(required編)

jquery-validation-railsのメモ書き。(Rails 5.1.4)
 
1.Gemに追加
gem 'jquery-validation-rails'
bundle install
 
 
2. app/assets/javascripts/application.js
以下を追加
//= require jquery.validate.additional-methods
//= require jquery.validate
 
 
 
3. 必須フィールドを記述
<div>名前</div>
<div>
<%= form.text_field :name, id: :name, name: :name, class: :text_field %>
</div>
 
 
4. Validateをトリガーするメソッドを記述
$(function(){
  $("#my_form").validate({
    rules : {
      name: {
        required: true
      }
    },
    messages: {
      name: {
        required: "必須入力です",
      }
    }
  });
});

以上で必須フィールドのValidationができる。
 
 
 5.エラー表示の場所を変更する。
 <div>名前</div>
<div id="emsg_name"></div>  ←追加
<div>
<%= form.text_field :name, id: :name, name: :name, :maxlength => 255, :size => 100, class: :text_field %>
</div>
 

$(document).ready(function () {
  $("#child_form").validate({
    rules : {
      name: {
        required: true
      }
    },
    messages: {
      name: {
        required: "必須入力です",
      }
    },
    errorPlacement: function(error, element) {  ←追加

      if (element.attr('name') == 'name') {
        error.appendTo($(''#emsg_name''));
      }

    }
  });
});

 <div id="emsg_name"></div>の場所にエラー表示されるようになった。
 
 
以上