jQuery Validation Engineを利用する

そもそもvalidation engineってなに？

form周りで便利なjQueryプラグイン。オープンソースで開発されている。ソースは以下のレポジトリから取得します。
https://github.com/posabsolute/jQuery-Validation-Engine
フォームの正確なエラー判定は、実際にSubmitした後にシステム側でバリデーションして貰えばいい。
しかしそうすると、「え、年月日は半角じゃないとだめなの？」とか、不必要なストレスをユーザーに与える恐ればあり、UXの質が下がる。
またサブミットがされないようjsで制御する必要も出てくるし、submitをフックにその他いろいろなjsがあれば、干渉する可能性もある。
それが回避できても、すべてのモダンブラウザで入力した全データを（エラー後も）そのまま残すのはハードルが高い。
もし失敗してしまえば、ユーザーにとっては「入力したデータが消えた！また入力！？めんどくさっ！」とフラストレーションにもなりかねない。

ならば、リアルタイムでユーザーの入力値をバリデーションし、送信前にユーザーさんにその値が有効かどうかを教えてあげればよい。

しかし、ほとんどのフォームは様々な項目をもち、項目ごとに入力値の要件は異なる。
その多様性を受け止めつつ、フロント側でバリデーションを簡単に行うことを可能にするのが、validation engineである。

とりあえずデモ！

作り手あるある。まずはデモをみたい、という方へ。
http://studio-key.com/1139.html#crayon-5979a326b1d66831322150
（自分の作ったものではないですが、同じプラグインで動くものなのでこちらを見てくださいmm）

導入・カスタムの方法

ファイルを取得して、読み込む

この記事にたどり着くような方には説明不要かもしれませんが、まずは必要なファイルを入手。
そして対応するjqueryとvalidation engineを、正しい順番で読み込みます。
この時、対応する言語のユニークなソースコードも必要になります。日本語だと、jquery.validationEngine-ja.jsです。

script-load.html

<script type="text/javascript" src="${pathOfJquery}"></script>
<script type="text/javascript" src="${pathOfValidationEngine-ja}"></script>
<script type="text/javascript" src="${pathOfValidationEngine}"></script>

これでvalidation engineのロードは完了。validationEngine関数を実行可能な状態です。
あとはバリデーションの実行命令を書きます。
この際、対象nodeはバリデーション対象本体（親ではなく）であることに注意。
（例えば後述のinput[type="text"]ならばinputタグ、selectタグならばoptionタグではなくselectタグそのもの）

run.js

(function($) {
  $(${jqueryObject}).validationEngine({
    // 以下のパラメータは任意
    promptPosition: "topLeft",//エラー文の表示位置
    showArrowOnRadioAndCheckbox: true,//エラー箇所の図示
    focusFirstField: false,//エラー時に一番文頭の入力フィールドにフォーカスさせるかどうか
    scroll: false
  });
})(jQuery);

最後に、対象nodeのinputやselectに、必要となるdata属性をもたせます。

data-attribute.html

<input data-validation-engine="validate[required]" type="text">

どういったdata属性を持たせると、どういった挙動をするのかについては、公式を見ていただくのが早いと思います。
公式サイトのdata属性に関する情報：https://github.com/posabsolute/jQuery-Validation-Engine#experimental-attribute-data-validation-engine

$.validationEngineのoptionでカスタムする

validationEngineのオプションはたくさんあります。全部日本語にするのはあまりにも大変なので、公式を参照してください。（要望が多ければ日本語化も考えます、というか誰かがそのうちやるかも？）
https://github.com/posabsolute/jQuery-Validation-Engine#options

上述のrun.jsでは、警告文吹き出しの位置（promptPosition）、ラジオとチェックボックスの矢印表示の有無（showArrowOnRadioAndCheckbox）と、フォームの最初の項目にオートフォーカスさせるかどうか（focusFirstField）と、関数実行時に一番上のエラー部にスクロールするかどうか（scroll）を渡しています。

バリデーションの内容・条件をカスタムする

例えばテキストフィールドに入力できる値が全角カタカナのみの場合、これを条件にしたバリデーションを行いたい、という状況があると思います。というか、2バイト文字で生きる我々日本人には必須かと。
以下、全角カタカナのバリデーションを実装する例。

data属性の変更

対象のnodeに以下のようなdata属性をもたせます

target-node.html

<input placeholder="foo" type="text" data-validation-engine="validate[required, custom[katakana]]">

requiredパラメータは必要に応じてとっちゃって下さい。

jquery.validationEngine-ja.jsの拡張

jquery.validationEngine-ja.jsの末尾に以下のコードを追加して、katakanaというパラメータを定義します。

custom.js

"katakana": {
　"regex": /^[ア-ンァ-ォャ-ョー]+$/,
　"alertText": "全角カタカナで入力してください"
}

思わぬバリデーションをやっちゃっている件

背景

先日、ある仕事の中で、自分がフロント実装したバリデーションが予期せぬエラーを吐く、とバックエンドから連絡をもらいました。
普通にメールアドレスを入れたのに、その値が受け付けてくれないとのこと。
直接システムに送信してみても、受諾された値だったので、当然formValidationも受け入れなきゃダメ。
入力された値は、”[e-mail]”。

結論

結論から言うと、nodeが持つplaceholdeと入力された値が完全に同一だった場合、無条件に（無効な値が入力された場合と同様に）警告され、フォーム送信が実行できないようです。placeholderを変更する、jsをカスタマイズすることで解決できます。

該当するコードブロック

jquery-validation-engine.js

default:
  var field_val      = $.trim( field.val()                               );
  var dv_placeholder = $.trim( field.attr("data-validation-placeholder") );
  var placeholder    = $.trim( field.attr("placeholder")                 );
  if (
       ( !field_val                                    )
    || ( dv_placeholder && field_val == dv_placeholder )
    || ( placeholder    && field_val == placeholder    )
  ) {
    return options.allrules[rules[i]].alertText;
  }

（それにしてもこのdefault定義やその利用の意図が解せない、、、、）

参考