Edited at

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