作ったはいいが、作った本人が『あれ？これどうやって使うんだっけ？』というのはプログラム書きの間ではよくある話。素敵なコードを書いていた自分に感心しつつ、そのころかなりいっていたんだろうな、いい意味でも悪い意味でもと感傷にふけることも。
というわけで、ちょっと前に紹介していた便利な（はずの）JSバリデーションの使い方がわからなくなったので、テスト的に実装して『あ～こんな風だと便利だな』と味わいたくて、テスト実装した結果をみんなでシェアできればと思っております。
|
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 60 61 62 63 64 |
<script> var max_length = "2"; var message1 = "メッセージを入力してちょ"; var message2 = "もういっぱいいっぱいです（早"; 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); } } }); } </script> |
|
1 2 3 4 |
<form id="comment"><input name="field1" type="text" /> <input name="field2" type="text" /> <input name="field3" type="text" /> <input name="field4" type="text" /></form> |