2009-03-12

非常に高機能で便利なJavaScriptライブラリとして評判の「jQuery」をちょっと触ってみた。
jQuery
Pluginが豊富に存在する、というのも人気の理由のようで。
formの入力チェックをしてくれる「Validation Plugin」というものを使って試してみた。
bassistance.de » jQuery plugin: Validation
忘れてしまわないうちにメモっておこう。

最も簡単なサンプル

それぞれ上記リンクからダウンロードして、「js」というディレクトリに放り込んでおいた。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>title</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
    $("#myform").validate();
});
    </script>
  </head>
  <body>
    <form id="myform" method="POST" action="./index.html">
      <input type="text" class="required" name="comment"/>
      <input type="submit" />
    </form>
  </body>
</html>

↑こんなフォームに、何も入力せずにsubmitしようとすると

↑こんな風に警告が現れる！
しかも、自動的にフォーカスがその入力フォームに移動し、内容を入力すると警告が消える！！
リアルタイムにvalidationをかけてくれているわけだ。

書いているJavaScriptのコードは、たったの３行。

$(document).ready(function() {
    $("#myform").validate();
});

DOMがロードされたタイミングで関数を実行する場合、jQueryではwindow.onloadを使うかわりにready()というのを使うと良いらしい。
ready(fn) - jQuery 日本語リファレンス

$(document).ready(function() {
    // 何か処理を書く
});

ページ読み込み時に、このreadyの引数になっている関数が実行される。上記サンプルでは、ここでvalidationの設定を行った。
といっても１行だけなんだけど。

$("#myform").validate();

$("#myform")というのはjQueryのセレクタ構文で、CSSと同じような使い方でelementを選択・操作できる。
この場合、id="myform"になっている要素、つまりform要素に、次の関数が実行されることになる。

validate();

コイツがValidation Pluginで拡張された部分に該当する。
このサンプルの場合では、選択されたform要素の中で、class="required"に指定されているものを勝手に探し出し、submit時にそのinput要素が入力されているかどうかをチェックしてくれている。

validationのruleをJavaScript内で変更する

入力チェックの内容はhtml内のclassで指定しないといけないか、というとそうでもない。
validate()関数の引数でvalidationのruleも指定することができる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>title</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
    $("#myform").validate({
        rules : {
            comment: {
                required: true,
                minlength: 5
            }
        }
    });
});
    </script>
  </head>
  <body>
    <form id="myform" method="POST" action="./index.html">
      <input type="text" name="comment"/>
      <input type="submit" />
    </form>
  </body>
</html>

このときは、form内のどのinput要素にruleを適用させるかをname属性から勝手に引き当ててくれる。

comment: {
    required: true,
    minlength: 5
}

という組み合わせをrulesに指定してやるだけで、name="comment"のinput要素を探してこのruleを適用してくれる。
(連想配列の最後にカンマを入れてはいけない言語もある - すぎゃーんメモの通り、カンマに気をつける)
上記の例は"required"に加えて"minlength"を指定しているので、入力がなければ

と、先ほどの例と同じだが、入力が1~4文字の場合もチェックに引っかかることになる。

さらにカスタマイズ：メッセージの日本語化

デフォルトのエラーメッセージは英語になっているので、日本語に変えよう、というとき。
このプラグインで使われるローカライズファイルを作成して変える、という方法
jQueryでフォームの入力チェックする、jquery.validate.js とエラーの日本語化 - Goodpic
もあるけど、input要素ごとにruleを指定するのと同様にエラーメッセージを個別に指定することもできる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
  <head>
    <title>title</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
    $("#myform").validate({
        rules : {
            comment: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            comment: {
                required: "なんか書くだろ常考…",
                minlength: $.format("{0}文字くらい書けよハゲ")
            }
        }
    });
});
    </script>
  </head>
  <body>
    <form id="myform" method="POST" action="./index.html">
      <input type="text" name="comment"/>
      <input type="submit" />
    </form>
  </body>
</html>

ちゃんと日本語に変更されてますね。

    $("#myform").validate({
        rules : {
            comment: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            comment: {
                required: "なんか書くだろ常考…",
                minlength: $.format("{0}文字くらい書けよハゲ")
            }
        }
    });

"rules"と同じレベルのところに"messages"という項目で、それぞれのnameについて、それぞれのruleに対応したメッセージを書くだけで適用されるらしい。

エラーメッセージのstyleを変更する

このエラーメッセージは、そもそもどうやって表示されているのか？Firebugを使って、エラー時に編集されたHTMLを見てみよう。

この状態から、何も入力せずにsubmitすると、

こうなる。
jQuery Validation Pluginではこのように、エラーメッセージを

<label class="error" for="[該当するinput要素のname属性]" generated="true">エラーメッセージ</label>

という要素をそのinput要素に付け足すことで表示させているらしい。
なので、そのerrorクラスに該当するlabel要素にCSSを適用させてやったりすれば、styleの変更も可能だ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
  <head>
    <title>title</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
    $("#myform").validate({
        rules : {
            comment: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            comment: {
                required: "なんか書くだろ常考…",
                minlength: $.format("{0}文字くらい書けよハゲ")
            }
        }
    });
});
    </script>
    <style type="text/css">
label.error {
    color: red;
}
    </style>
  </head>
  <body>
    <form id="myform" method="POST" action="./index.html">
      <input type="text" name="comment"/>
      <input type="submit" />
    </form>
  </body>
</html>

これまでのサンプルに、

label.error {
    color: red;
}

というCSSを付け足しただけ。これだけで、

というようにエラーメッセージの色を赤く変えたりできる。

エラーメッセージのattributeを変更する

とはいえ、必ずerrorクラスのlabel要素になってしまうのかというとそうでもなく、それも変更することができる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
  <head>
    <title>title</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
    $("#myform").validate({
        rules : {
            comment: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            comment: {
                required: "なんか書くだろ常考…",
                minlength: $.format("{0}文字くらい書けよハゲ")
            }
        },
        errorClass: "myError",
        errorElement: "h1"
    });
});
    </script>
    <style type="text/css">
h1.myError {
    background-color: gray;
}
    </style>
  </head>
  <body>
    <form id="myform" method="POST" action="./index.html">
      <input type="text" name="comment"/>
      <input type="submit" />
    </form>
  </body>
</html>

このように、validate()の引数でエラーメッセージを表示するときの要素名とクラス名を指定することもできる。

    $("#myform").validate({
        rules : {
            comment: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            comment: {
                required: "なんか書くだろ常考…",
                minlength: $.format("{0}文字くらい書けよハゲ")
            }
        },
        errorClass: "myError",
        errorElement: "h1"
    });

上記例では、errorElementを指定することでlabelではなくh1で表示されるようしている。何も指定していなければデフォルトでlabelになるようだ。
同様にclass名も変更できるので、それぞれカスタマイズして自由にCSSを適用させたりもできる。はず。

h1.myError {
    background-color: gray;
}

まぁ、こんなエラーメッセージ表示されたくないですけどね＞＜

エラーメッセージの表示位置をカスタマイズする

これまでのサンプルでは、すべてruleを指定したinput要素のすぐ後ろにエラーメッセージの要素が付け足されるものだった。
とは言えもうちょっと違うところにエラーメッセージを出したいときだってあるはず。
この方法が正しいかどうか分からないけど、１つの方法として「現れるであろう要素をあらかじめ書いておいてしまう」という方法がある。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
  <head>
    <title>title</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
    $("#myform").validate({
        rules : {
            comment: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            comment: {
                required: "なんか書くだろ常考…",
                minlength: $.format("{0}文字くらい書けよハゲ")
            }
        },
        errorClass: "myError",
    });
});
    </script>
    <style type="text/css">
label.myError {
    color: red;
}
    </style>
  </head>
  <body>
    <form id="myform" method="POST" action="./index.html">
      <input type="text" name="comment"/>
      <input type="submit" />
      <hr />
      エラーはここに表示するよ：<label for="comment" class="myError" generated="true" />
    </form>
  </body>
</html>

前々項「エラーメッセージのstyleを変更する」で書いたように、エラーが検出されると、自動的に

<label for="comment" class="myError" generated="true" />

というような要素が付け足される。ので、それを先取りする形で最初からhtml内に埋め込んでおいてしまう。
すると、input要素の後ろには何も現れずに予め書いておいた要素内に書き込まれることになる。
ただし、この方法は当然ながらvalidate指定したformの内部でしか使えない。
別の場所に表示させるにはもっと違う方法が必要だ。

エラー表示の位置を指定するその２

というわけで正しい方法。errorLabelContainerをselectorで指定することで、自由に場所を設定することができる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
  <head>
    <title>title</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
    $("#myform").validate({
        rules : {
            comment: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            comment: {
                required: "なんか書くだろ常考…",
                minlength: $.format("{0}文字くらい書けよハゲ")
            }
        },
        errorClass: "myError",
        errorLabelContainer: "#errorList",
        wrapper: "li"
    });
});
    </script>
    <style type="text/css">
label.myError {
    color: red;
}
    </style>
  </head>
  <body>
    <form id="myform" method="POST" action="./index.html">
      <input type="text" name="comment"/>
      <input type="submit" />
    </form>
    <hr />
    <ul id="errorList" /ul>
  </body>
</html>

このようにリスト表示させたりすることも可能。

    $("#myform").validate({
        rules : {
            comment: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            comment: {
                required: "なんか書くだろ常考…",
                minlength: $.format("{0}文字くらい書けよハゲ")
            }
        },
        errorClass: "myError",
        errorLabelContainer: "#errorList",
        wrapper: "li"
    });

errorLabelContainerにjQueryのセレクタを指定すると、そこに指定された要素内にエラーのlabelを書き出してくれるようになる。
また、この例ではさらにwrapperとして"li"を指定することで、

<li>
  <label class="myError" for="comment" ...>...</label>
</li>

という要素が書き出されるようにしている。
こうすることで、どこでも自由にエラーメッセージを表示させるようにすることができる。

その他

まだまだこのValidation Pluginには様々な機能がある。
ドキュメントを読みながら色々やってみると面白いと思う。
Documentation | jQuery Validation Plugin