jQueryを使って、HTMLフォームの入力チェック（バリデーション）が簡単にできる、jquery.validate.js プラグイン。
bassistance.de » jQuery plugin: Validation
便利〜と思いつつ、エラーメッセージの日本語ローカライズファイルが無かったので、作ってみた。
利用方法は、まず、jquery.validate.jsを作者のサイトからダウンロード。次に上記の messages_ja.js をダウンロード。利用したいHTMLページで、２つのjavascriptファイルを読み込みます。この際に、messages_ja.jsをあとから読み込むようにする。
<script language="javascript" type="text/javascript" src="/js/jquery-1.2.3.min.js"></script> <script language="javascript" type="text/javascript" src="/js/jquery.validate.js"></script> <script language="javascript" type="text/javascript" src="/js/messages_ja.js"></script>
使い方は非常に簡単で、チェックしたいフォームの入力欄に値をクラスや、minlengthなどで指定してあげるだけ。例えば、
- 必須項目 : class="required" を指定
- URLの値 : class="url" を指定
- メールアドレスで必須 : class="required email" を指定
- 最小値を設定 : minlenght="2" を指定
フォームのHTMLサンプルはこんな感じに。
<form id="form-host"> <label for="cname">名前（必須, 2文字以上）</label> : <input id="cname" name="name" size="25" class="required" minlength="2" /><br /> <label for="curl">URL</label> : <input type="text" id="curl" name="url" size="25" class="url" /><br /> <label for="cemail">E-Mail（必須）</label> : <input id="cemail" name="email" size="25" class="required email" /><br /> <input type="submit" class="submit" id="form-host-submit" value="登録" /> </form>
そして、jQueryのお約束である、<head></head>内の、$(document).readyでバリデーションするFormのIDを指定。
<script type="text/javascript">
$(document).ready(function(){
$("#form-host").validate();
});
</script>
デモです。
詳しいドキュメントはこちらで。
ブックマーク & はてなスター
コメント
お約束ですが、auやDoCoMoのアホ仕様アドレスは、はじかれますね。
実際には使用できるメールアドレスが不正と表示される。
どうしましょうかねぇ
例の ドット（.）で始まるアドレスとかですね。 カスタム・バリデーション・ルールも設定できるようなので、既存のemail判定を拡張しつつ
http://docs.jquery.com/Plugins/Validation/Validator/addMethod#namemethodmessage
「このメールアドレスは、日本の携帯でしか利用しない特殊な形式ですので気をつけましょう」など、表示するとか？
本家に日本語メッセージデータをフィードバックしてみてはいかがでしょうか。
他の言語はバンドルされて配布されているようですので。