jQueryでフォームの入力チェックする、jquery.validate.js とエラーの日本語化

jQueryを使って、HTMLフォームの入力チェック(バリデーション)が簡単にできる、jquery.validate.js プラグイン。

bassistance.de » jQuery plugin: Validation

便利〜と思いつつ、エラーメッセージの日本語ローカライズファイルが無かったので、作ってみた。

messages_ja.js

利用方法は、まず、jquery.validate.jsを作者のサイトからダウンロード。次に上記の messages_ja.js をダウンロード。利用したいHTMLページで、2つの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>

デモです。

:
:
:

詳しいドキュメントはこちらで。

Plugins/Validation - jQuery JavaScript Library