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です。

```html: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タグそのもの）

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

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

```html: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属性をもたせます

```html: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というパラメータを定義します。

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

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

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

### 該当するコードブロック

```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定義やその利用の意図が解せない、、、、）
## 参考
http://kitano-daichino-gijyutuya.hatenadiary.jp/entry/2015/06/12/174204