2011年2月20日にアップしていた記事を復活させました。
最近、開発の参考資料を漁るべくググってもドキュメントがあまりない、jQuery.validation を使っての複数項目チェックと複数エラーメッセージ表示についてまとめておきました。
フォームタグでくくっての入力欄を用意しようとした場合、当然のように「名前」「メルアド」「住所」「電話番号」等々、複数項目を入力することを想定してデザインするはず。
それをデータベースに登録する前に、その入力した項目の中にデータベースには登録させたくない文字列があったり、ハッキングを試みるようなデータが入っていたりするとそれをはじくような処理をバリデーションと言うわけですが、それを検出してエラーメッセージを表示させる場所を検討したりデザインする作業はいつも悩ましかったりします。
これをjQuery.validateプラグインでさくっとやってしまおうじゃないかというのが今回のお題目。
しかしJavascriptアレルギーだった私が、今回の開発現場でjQueryすっかり虜になり、その勢いで、複数項目チェックで好きなところに好きなようにエラーメッセージを出力する方法を編み出せたので、参考までにご紹介いたします。サンプルコードも公開しますので、よろしかったら使ってみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
function validateJquery( max_length ){ $("#commnet").validate({ rules:{ field1:{ required : true, maxlength : max_length }, field2:{ required : true, maxlength : max_length }, field3:{ required : true, maxlength : max_length }, field4:{ required : true, maxlength : max_length } }, messages:{ field1:{ required: message1, maxlength: message2 }, field2:{ required: message3, maxlength: message4 }, field3:{ required: message5, maxlength: message6 }, field4:{ required: message7, maxlength: message8 } }, //表示位置指定 errorPlacement: function(error, element) { switch(element.attr('name')) { case "field1": error.insertAfter($('#field1_error')); break; case "field2": error.insertAfter($('#field2_error')); break; case "field3": error.insertAfter($('#field3_error')); break; case "field4": error.insertAfter($('#field4_error')); break; default: error.insertAfter(element); } } }); } |
特に、”errorPlacement”を設定することで、それ以下で指定したidの値のあるタグ位置にエラー出力できるようになりますので、その位置を変えることで自在に出力位置を変更できます。こりゃ便利(^e^)n
ではそのサンプルhtmlを以下に。
|
1 2 3 4 5 6 7 8 9 10 |
<form id="comment"> <input name="field1" type="text" /> <div id="#field1_error"></div> <input name="field2" type="text" /> <div id="#field2_error"></div> <input name="field3" type="text" /> <div id="#field3_error"></div> <input name="field4" type="text" /> <div id="#field4_error"></div> </form> |
参考にしたドキュメントは「jQuery Validation Pluginメモ」
http://micelle.org/trash/jquery-validation-plugin