リアルタイムバリデーションライブラリ validate.js を修正
現在作成しているWebアプリケーションに、JSでリアルタイムバリデーションを行えるシンプルなライブラリvalidate.jsを使わせていただしています。
http://blog.masuidrive.jp/articles/2006/01/05/validation
使っているうちに動かない画面が出てきたので解決方法をメモ。
問題
画面内にselect要素がある場合、prototype.jsのfindAllメソッドでエラーが出る。
結論から言うと、247行目の
sheet = new Array();
の部分を
sheet = {};
に変更すればOKです。修正後軽く動作確認してみましたが問題はないようです。
原因
246行目〜のValidator.registerで登録したバリデーションの定義を55行目〜のBehaviour.applyで使用しています。
- 249行目でsheet['#aaa'] = function… のように登録しているので、配列に要素が追加されるのではなく、配列オブジェクトのメンバとして要素が登録されてしまっている。
- それを57行目で
for (selector in sheet){ list = document.getElementsBySelector(selector);
のように使用しているのでちゃんと動いているように見えるんですが、実はこのまわし方をすると、配列オブジェクトであるselectorの要素ではなくてメンバーに対してループを回すことになってしまうんですよね。joinとかpushとか配列のメソッドがselectorに入っているということです。で、prototype.jsの拡張でselectというメソッドが追加されているので、こいつが'select'というcssセレクタでselect要素を捕まえてきてsheet.select(捕まえてきたselect要素)というメソッドを実行することになりエラーが起きちゃっているみたいでした。
解決策としては、
の部分を
sheet = {};
のようにナチュラルなオブジェクトを使用すればOKということになります。
以上、公開されているブログのコメント欄でお知らせしようとしたのですが、コメントが書けなかったので備忘録も兼ねて書いておきます。トラバで気づいてもらえると嬉しいです！
