今回はjQuery のフォームチェック（バリデーション）のプラグインである
validate.js の話
validate.js はブラウザ上でフォーム入力をチェックするものであるが
細かく思ったより設定して使う事が可能である
例えば、
remote() を遣うと、
フォームの入力をそのまま指定のAPIサーバー（サーバーサイドプログラム）に
内容を送り付けて、サーバー上のDBなどや、リアルタイムな処理を用いて
フォームの入力チェックが有効かどうかを知る事ができる（自分へのメモなんですけどね＾＾；）
さて、今回はこのvalidate.js の
format() です。
これをネット上で使い方の参考を見ていると
例えば
＄.validator.format("{0} is not a valid value");
とか
jQuery.format("{0} is not a valid value");
とか
なんだけど、これだとなぜかうちの環境で動かない！！（’Д’＃）
理由が分からないから、そもそもこの
format() は、何処から継承されてるの？
と思って調べたら普通にvalidate.js に実装されている機能っぽい
http://jqueryvalidation.org/jQuery.validator.format/
それには
Example:
の部分に
jQuery.validator.format("{0} is not a valid value");
と書いてあるのでその通りに書いてみた。
すると。。。。動いた＾ｗ＾；
うーん・・・・
よくある、よくあったら困る様な固有な書き方とか、
何かを回避する為に、$やQuery って書く書き方をしてるのだろうか？
不思議だけど、平然とどのサイトもその様に書いている・・・
私の場合には、
jquery-1.11.2.min.js
と
jquery.mobile-1.4.5.min.js
と
jquery.validate.1.13.1.min.js
を順に読み込んで使っていた環境での出来事
特に何かした覚えはないんだけどな・・・
普通に考えてそうだと思うけど、人のサイトの多くで
jQuery.validator
とは書いてない
あと私の環境では、試しに書いたjQuery を$ にした
$.validator.format("{0} is not a valid value");
でも動いた
なんだろう、みんなどうしてそんな書き方しちゃってるんだろう・・・
私の使い方が悪いのか？ｗ
なんだろう、なんだろう・・・なんだろう・・・どうしてなんだろう・・・・
そのうち分かる日が来る・・・のかもしれないｗ
因みに私は勿論json で設定しているので
使っている部分のサンプルは、
フォームの郵便番号に対しては下記の様にしています（他の部分は紛らわしいので載せてないよ！）
{
rules: {
zipA :{
required: true,
minlength: 3,
maxlength: 3,
digits: true
},
zipB :{
required: true,
minlength: 4,
maxlength: 4,
digits: true
}
},
messages: {
zipA :{
required: "郵便番号上３桁は必須です",
minlength: jQuery.validator.format("{0} 文字以上を入力してください"),
maxlength: jQuery.validator.format("{0} 文字以下を入力してください")
},
zipB :{
required: "郵便番号下4桁は必須です",
minlength: jQuery.validator.format("{0} 文字以上を入力してください"),
maxlength: jQuery.validator.format("{0} 文字以下を入力してください")
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().parent().last());
}
// ,
// submitHandler: function (form) {
// $(':mobile-pagecontainer').pagecontainer('change', '#success', {
// reload: false
// });
// /* サンプル */
// $('body').pagecontainer('load', 'change_linked.html');
// return false;
// }
}
フォームのinput でminlength="x" maxlength="x" としておけば、HTML5 の処理で
Chrome で確認した限り、思った通りに動いてました
（この場合ではx は3 か4 という事になります）
毎度ながら個人的なメモでした<_ _>
[1回]
コメント一覧