Railsにparsleyというjavascriptのバリデータを導入

Last updated at 2017-03-15Posted at 2017-03-15

Railsにparsleyというjavascriptのバリデータを導入したので簡単にメモ。
html5が動かないIE9用に導入したけど、html5のものより柔軟で使いやすそうでした。

parsley-railsというgemがありますが、中身を見るとjsとcssを適用してるだけみたいなので、今回は使いませんでした。

jsのダウンロード

ここからparsley.min.jsをダウンロード
http://parsleyjs.org/doc/download.html

jaのロケールファイルも必要ならここからダウンロード。parsley-jaなど適当な名前にリネーム
https://github.com/guillaumepotier/Parsley.js/tree/master/dist/i18n

app/assets/javascriptsにファイルを置いて、application.jsに以下の記述を追加。
ちなみに前提としてjquery(>= 1.8)が必要みたいです。普通は使ってるはず

//= require parsley.min
//= require parsley-ja

ちなみにエラーの表示がシンプルすぎるのでデコった方がいいと思います。

app/assets/stylesheetsに置いて、application.css(scss)に以下を追加

*= require parsley

公式にあるように以下の記述追加(もちろんform名は変えて下さい)
http://parsleyjs.org/doc/index.html#installation

<script type="text/javascript">
  $('#form').parsley();
</script>

これでsubmitボタンを押した時にバリデートされるはず。
基本的には必須の項目にrequiredをつけて、parselyにバリデートしてもらう感じですが、
emailとかnumberとかちょっとしたパターンマッチングなどもできます。

任意のイベント発火時に以下のコードを加えればバリデートされます。

$('#form').parsley().validate();

ただしこれだと全てバリデートされてしまいます。
一部だけバリデートしたい場合はグループを指定します。

例えば郵便番号を入力時に、都道府県や市区町村などが自動入力され
それらの入力値だけをバリデートしたい場合は
以下のようにグループを指定すれば期待した動作になると思います。

<input type="text" name="prefecture" data-parsley-group="hoge">
<input type="text" name="city" data-parsley-group="hoge">

$("#post_code").keyup(function() {
  $('#form').parsley().validate({group: "hoge"});
});

概ね快適に動きますし、気に入っているのですが、辛いところもありました。

radioボタンやselectタグを変更した時に、inputを表示したり非表示にしたりすることはよくあると思うんですが、そのinputにrequiredがついている場合はちょっと面倒そうです。

というのもparselyは見えていないinputもバリデートしてしまうので、その辺りを考慮して、非表示になった場合はrequiredもfalseにするとか、ケアする必要があります。

それをミスるとsubmit出来ないという致命的かつ気づきにくいバグが出来てしまいます。。
ちょっと使って間もないので、その辺りを解決するオプションがあるのかもしれません。。

何かわかったら追記します