クマの手も借りたい
馬とテニスとリラックマが好きな IT 系のエンジニアです。
JavaScript

jQueryValidationEngineで項目に表示するエラーを1つに限定する

フロントエンドの技術の発展はめまぐるしいですが、何だかんだで JQuery を使う機会はまだまだ多いです。

今回は、jQueryValidationEngine というバリデーション用のプラグインを初めて使いました。

このプラグイン、入力項目の class 属性にバリデーションルールを設定しておけば、form のサブミット時だけでなくフォーカスが外れた時点にもエラーチェックしてくれるので便利です。

ただ、デフォルトではルールに沿わなかったエラーについてすべてのエラーメッセージが表示されてしまい、ユーザーにとっては少々邪魔くさい面もあります。

そこで、1 つの項目の中で最初に引っ掛かったエラーメッセージだけを表示するオプションを探す旅に出てみました。

最初にエラーがあった項目のみエラーを表示する

該当機能を探す過程で、以下のオプションに行き着いたのですが、残念ながら目的のものではありませんでした。

showOneMessage

Only display the first incorrect validation message instead of normally stacking it. It will follows the validation hierarchy you used in the input and only show the first error.

showOneMessage

こちらのオプションは、form 内に複数ある項目の中でエラーメッセージを表示するのを 1 つの項目に限定したい場合に使うオプションです。

以下の質問サイトに、まさに同じ目的の人の質問があったのですが、そこで回答者に紹介されているのがこのオプションだったのですよね。

これ、質問者が欲しているものとは違いますよね。きっと。

JavaScriptに関する質問

メールアドレスのフォームに何も入力しないでsubmitボタン押下 → エラー文2つ表示
これをメールアドレスのフォームに何も入力しないでsubmitボタン押下 → 必須項目のみ表示みたいにしたいのですが、

jQuery-Validation-Engineのエラー表示に優先順位をつけて1つだけ表示したいです

あっ、やっぱオプションあるじゃんと思って私も素直にこれを実装しちゃいましたが、よくよくリファレンス読んでみると違っていたというオチです。

目的のオプションは存在していた

それ以降も自分なりには調べていたのですが、ついに断念してフロントエンドの技術が高い人に相談してみました。

結果、30 分以内に正解が導き出されました。流石ですね。餅は餅屋とはこのことです。

maxErrorsPerField

If we have to show one error at a time per field field then we will use

Validation Engine One by one error display

使い方は、form にバリデーションをバインドする際にオプション指定するだけです。

$("#form_id").validationEngine({
  maxErrorsPerField: 1
});

もう少し英語よりの検索ワードでググらないとダメだったのかな・・・。

なお、このオプションはなぜかリファレンスには載ってなくて、このオプションを載せるべきだって書いている人もいました。

jQuery-Validation-Engine/issues/897

There is this fine option maxErrorsPerField which unfortunately is undocumented. This might be usefull to others and should be informed about it.

maxErrorsPerField undocumented

Web API The Good Parts

オライリーの「Web API」に特化した本です。最近の多くの Web サービスは API が活用されていますが、その技術はこれまでの Web サイトとそれほど大きく変わりません。

今後、マイクロサービス化が進む中で知っておいて損はない内容が詰め込まれており、現場のエンジニアやこれから Web 系のエンジニアを目指す人にもオススメの一冊です。

created by Rinker
¥2,376
(2018/09/20 11:58:13時点 Amazon調べ-詳細)