執筆者: 有限会社 WINGS プロジェクト 山田 祥寛

動作確認環境: Visual Studio 2010、jQuery 1.5


jQuery にはプラグインと呼ばれる追加ライブラリが用意されており、jQuery の基本機能を自在に拡張できます。本稿では、あまたあるプラグイン (英語)の中でも代表的な jQuery Validation を例に、プラグインの基本的な用法を解説します。jQuery Validation はその名の通り、フォームからの入力の妥当性検証をシンプルなコードで実装できるようにしてくれるプラグインです。

jQuery Validation は、以下のページからダウンロードできます。

入手した jquery.validate.min.js は jQuery 本体 (jquery-1.5.min.js) が配置されているのと同じフォルダーに配置するだけです。準備ができたら、具体的なサンプルで jQuery Validation の動作を確認してみましょう。

HTML
<!DOCTYPE html> 
<html> 
<head> 
  <title>jQuery Validation による入力値の検証</title> 
  <style type="text/css">.invalid{ color: Red; }</style> 
</head> 
<body> 
<form id="fm"> 
<label>名前: 
    <input type="text" id="name" name="name" size="15" /></label><br /> 
<label>誕生日: 
    <input type="text" id="birth" name="birth" size="10" /></label><br /> 
<label>メールアドレス: 
    <input type="text" id="email" name="email" size="50" /></label><br /> 
<input type="submit" value="送信" /> 
</form> 
 
<script src="../Scripts/jquery-1.5.min.js" type="text/javascript"></script> 
<script src="../Scripts/jquery.validate.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
  // フォーム #fm に対して検証ルールを登録 
$('#fm').validate({ 
  errorClass: 'invalid',    // エラー メッセージを表示する際に使用するスタイル 
   // それぞれの項目に適用される検証ルール 
  rules: { 
    'name'{ 
      required: true,    // 必須検証 
      rangelength: [210]    // 文字列長検証 (2~10文字) 
    }, 
    'birth'{ dateISO: true },    // 日付型検証 
    'email'{ email: true }    // メールアドレス形式検証 
  }, 
   // 検証エラー時に表示されるエラー メッセージ 
  messages: { 
    'name'{ 
      required: '名前は必ず入力してください。', 
      rangelength: $.format('名前は{0}~{1}文字で入力してください。') 
    }, 
    'birth'{ dateISO: '誕生日は日付形式で入力してください。' }, 
    'email'{ email: 'メールアドレスの形式が不正です。' } 
  } 
}); 
</script> 
</body> 
</html> 
 
 

                             

図 1

わざと不正な値を入力して、[送信] ボタンをクリックすると、エラー メッセージが表示され、フォーム送信がキャンセルされることが確認できます。

jQuery Validation の中心となるのは入力値検証を行う validate メソッドです。validate メソッドにはハッシュ形式で検証に必要な情報を渡します。ここでは最低限の動作に必要な errorClass (エラー メッセージを表示する際に適用するスタイル)、rules (検証ルール)、messages (エラー メッセージ) を指定しています。

rules、messages パラメータには、更に「要素名: {検証ルール名: 値}, ...」の形式で検証ルールとエラー メッセージを登録します。指定できる値 (検証パラメータ) は検証ルールに応じて変動します。たとえば、rangelength (文字列長) 検証であれば最小長、最大長を配列形式で渡しますが、required (必須検証)、dateISO (日付型検証) などでは検証を有効にするための true を渡します。利用できる検証ルールと対応する検証パラメータについては、List of built-in Validation methods (英語) も参照してください。

エラー メッセージには $.format メソッドを利用することで、検証パラメータを埋め込むこともできます。{0}、{1} が検証パラメータを埋め込むためのプレースホルダです。


Code Recipe Code Recipe

ページのトップへ