SMALL MAKE

by EIJI NAKAI

PROGRAMING

Ruby & Rails

Rails+JQuery.validation: Radio Button の errorPlacement

2015-03-05 19:29

複数ページのフォームでバリデーションを行うケースがあり、railsのモデルのバリデーションが使えないように思ったので、jquery-validation-rails を使うことにした。

しかし、デフォルトのエラー表示の位置が気に入らない。
例えば、下の[     ]が入力フィールドであるとして

姓[     ] 名[     ]

これらを必須項目にすると、姓の入力がない場合、

姓[     ] 姓を入力してください 名[     ]

のように「姓」の後ろにエラーが表示され「名」が離れてしまう。

そこでerrorPlacement を使う。例えば、以下のようにすれば、「姓」も「名」もエラーメッセージを後ろに集めることができる。これは Jquery Validation plug-in custom error placement からの受け売り。

姓<%= f.text_field :family_name %> 名<%= f.text_field :first_name %>
<span id="invalid-registration_family_name"></span> <!-- <=ここでエラー表示 -->
<span id="invalid-registration_first_name"></span>
$("form").validate({
  rules: { ..... 略 ..... },
  messages: { ..... 略 ..... },
  errorPlacement: function(error, element) {
      error.insertAfter('#invalid-' + element.attr('id'));
  }
});

ここからが本題。

ラジオボタンなんかはどうすればいいのだろう。ラジオボタンでは、elementのIDがみんな違っていて、それら全てを span で書かなければならないだろうか?スゴイたくさんの選択肢がある場合に困る。

elementのIDではなくname を使えれば問題ないはずだ。以下のように書き直してみる。

error.insertAfter('#invalid-' + element.attr('id'));
↓
error.insertAfter('#invalid-' + element.attr('name'));

しかし、rails の form_for 要素では element name は例えば name=”registration[xxxx]” のようになっていて、この [ ] 記号がIDとしてはどうもまずいらしい。どうする?

結論↓

いろんなやり方がある。element name を使って、その[]を例えば _ に文字置換するとか。
僕は以下のようにしてみました。正規表現でregistration[]を取り除いてデータのアイテム名だけにしている。
動いてはいるが問題ないだろうか。

以下から選択してください。<span id="invalid-category"></span> <!-- <=ここでエラー表示 -->
<%= f.radio_button :category, '010', {} %><%= f.label :category, "ソフトウェア開発",'010'  %>
<%= f.radio_button :category, '020', {} %><%= f.label :category, "プロバイダ",'020' %>
<%= f.radio_button :category, '030', {} %><%= f.label :category, "製造",'030' %>
$("form").validate({
  rules: { ..... 略 ..... },
  messages: { ..... 略 ..... },
  errorPlacement: function(error, element) {
    var element_name = element.attr('name');
    var field_name = element_name.match(/.+\[(.+)\]/);
    error.insertAfter('#invalid-' + field_name[1]);
  }
});