Help us understand the problem. What is going on with this article?

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした