parsley.jsで独自バリデーションを作る

フォームのフロントの入力チェックに欠かせないのがparsley.jsです。ビルドインのバリデーションだけだと基本的なものしかないので、独自バリデーションの作り方を記載しています。

バージョン
カスタムバリデーションの作り方
Ruby on Railsで実装するときの注意点

バージョン

parsley.js　2.3.13

カスタムバリデーションの作り方

公式に載っているカスタムバリデーションのサンプルコードです。

<input type="text" data-parsley-multiple-of="3" />
[...]
<script>
window.Parsley
  .addValidator('multipleOf', {
    requirementType: 'integer',
    validateNumber: function(value, requirement) {
      return 0 === value % requirement;
    },
    messages: {
      en: 'This value should be a multiple of %s',
      fr: 'Cette valeur doit être un multiple de %s'
    }
  });
</script>

サンプルコードを見ただけでなんとなく使い方はわかりますね。

この例では、テキストフィールドに入力された値が数字であること、3で割り切れることを検証しているようです。エラーの場合は「This value should be a multiple of 3（この値は3の倍数でなければなりません）」と表示してくれます。しかもエラーメッセージは使用者のlocaleに合わせて変えられます。
validateNumberで指定している関数の引数は、valueに入力値、requirementに属性値（この例では3）が入ります。
3という値は、inputのdata属性で渡すことができるので、multipleOfという入力チェックを5でも10でも使い回すことができます。便利ですね。

以下からはaddValidatorに渡している設定値を解説します。

requirementType:

属性値（この例ではdata-parsley-multiple-of=”3″の値）の期待する型を指定します。指定できる値は以下です。

string
integer
number
date
regexp
boolean

stringを指定すると何もしませんが、それ以外は指定しておくと値の型変換や型チェックを行ってくれるようです。入力値が複数ある場合、配列で型も複数指定します。

validateNumber:

これは入力値（value）の検証方法を指定しています。指定できる値は以下です。

validateString
validateNumber
validateDate
validateMultiple

requirementTypeは属性値の型指定でしたが、こちらは入力値（value）の型を指定します。

独自関数の書き方

validateNumber: function(value, requirement) {...}の部分でカスタムバリデーションの関数を定義しています。この関数は値が適切な場合はtrueを、値がエラーの場合はfalseを返す必要があります。引数のvalueはinputの入力値が入り、requirementは属性値（この例だと3）が入ります。

Ruby on Railsで実装するときの注意点

カスタムバリデータの名称が上記の例multipleOfのように複数単語になる場合、キャメルケース、スネークケース、ケバブケース、どれで書くといいかという問題です。結論としてはdata属性はハイフン区切りで、jsのaddValidatorの引数はキャメルケースで書くと良いでしょう。これには3つの理由があります。

※キャメルケース：単語の頭文字を大文字にして区切る
※スネークケース：単語をアンダーバーで区切る
※ケバブケース：単語をハイフンで区切る

１．HTML5のdata属性は大文字が使用できない

以下MDNのサイトに記載のあるとおり、data属性には大文字が使用できません。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*

名前に大文字の A から Z までの文字を含めてはならない。

そのためdata属性にはキャメルケースが使用できません。

２．jsのdatasetは、ケバブケースはキャメルケースに変換する仕様

parsleyは内部でjsのdatasetを利用してdata属性を取得しているようです。その場合、data属性がケバブケースだったらキャメルケースに変換し、スネークケースだったらそのままにするようです。

なお、 HTMLElement.dataset プロパティは DOMStringMap であり、またカスタムデータ属性名のハイフン (U+002D) はその次の文字を大文字化したもの (キャメルケース) に変換されるので、 data-test-value は HTMLElement.dataset.testValue (または HTMLElement.dataset["testValue"]) としてアクセスできます。

以下に具体例をコードで示します。

<input type="text" data-parsley-multiple-of="true">　→　HTMLElement.dataset["parsleyMultipleOf"]
<input type="text" data-parsley_multiple_of="true">　→　HTMLElement.dataset["parsley_multiple_of"]

data-parsley_multiple_ofeって、ハイフンとアンダーバーが混在していてなんだか気持ち悪いですね。この時点でケバブケース押しとなるのですが、Railsの場合はもう一つ理由があります。

３．Railsのビューヘルパーは、スネークケースのHTMLが生成しにくい

ビューヘルパーにdata属性を書くとき、シンボルにハイフンは使えないため、以下のようにスネークケースで書くと思います。そうすると生成されるHTMLがケバブケースに変換されます。
https://qiita.com/ore_public/items/52b2ce119cb26399d876

<%- f.text_field :name, data: {parsley_multiple_of: true} %>
↓
<input type="text" data-parsley-multiple-of="true">

ビューヘルパーだけどスネークケースでdata属性を書きたい場合は、以下のようにします。

<%- f.text_field :name, data: {'parsley_multiple_of': true} %>
↓
<input type="text" data-parsley_multiple_of="true">

どちらがきれいかというと、前者だと思います。

よってdata属性はハイフン区切りで、jsのaddValidatorの引数はキャメルケースで、という結論です。