jQuery
frontend

jQuery Validation Engineを利用する

More than 1 year has passed since last update.

そもそも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も受け入れなきゃダメ。
入力された値は、”test@companyname.com”。

結論

結論から言うと、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定義やその利用の意図が解せない、、、、)

参考

http://kitano-daichino-gijyutuya.hatenadiary.jp/entry/2015/06/12/174204