JQuery.validate.jsで複数のフォームのエラーを一つに。

JQueryのバリデーション処理（というか優しさ処理？w）を入れる際に、ハマったのでメモ。

探し方が悪かったのか、情報も少なかった。。

複数のフォームが並んでいるような状態でエラーが出るとものすごい感じになる。

例えば電話番号の入力フォームとかがそんな感じ。

|      | – |      | – |      |

こんな感じ？分かる？？w

この３つのフォームに対するエラーをまとめるにはグループ化を使う。

$(“#form1″).validate({

// グループ化する

groups : {

phone : “phone1 phone2 phone3″ // name属性で大丈夫っぽい。

},

errorPlacement: function(error, element) {

// エラーを出す場所を決める

if (element.attr(“name”) == “phone1″

|| element.attr(“name”) == “phone2″  || element.attr(“name”) == “phone3″ )

error.insertAfter(“#phone3″); // IDがphone3のフォームの後ろにエラーを吐き出す

},

rules : { ・・・・・

こんな感じでいける。

ちなみにエラーの場所を決めるにはもう一つ手がある。

エラー出力時に生成されるlabelを先に書いておくという荒技。

rules {

・・・・・

},

errorClass: “inputError”

上記のようにJSファイルにエラークラスを設定しておいて、View(HTML)にlabelタグをぶっ込む。

<input type=”text” name=”hoge” value=”" class=”hoge” />様

<label for=”hoge” class=”inputError” generated=”true” />

こうするとlabelの部分に対象のエラーメッセージが出る。

お試しあれ。

おしまい。