jQuery Validation は、以下のページからダウンロードできます。
jQuery plugin: Validation (英語)
入手した jquery.validate.min.js は jQuery 本体 (jquery-1.5.min.js) が配置されているのと同じフォルダーに配置するだけです。準備ができたら、具体的なサンプルで jQuery Validation の動作を確認してみましょう。
<!DOCTYPE html>
<html>
<head>
<title>jQuery Validation による入力値の検証</title>
</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: [2, 10] // 文字列長検証 (2～10文字)
},
'birth': { dateISO: true }, // 日付型検証
'email': { email: true } // メールアドレス形式検証
},
// 検証エラー時に表示されるエラー メッセージ
messages: {
'name': {
required: '名前は必ず入力してください。',
rangelength: $.format('名前は{0}～{1}文字で入力してください。')
},
'birth': { dateISO: '誕生日は日付形式で入力してください。' },
'email': { email: 'メールアドレスの形式が不正です。' }
}
});
</script>
</body>
</html>
わざと不正な値を入力して、[送信] ボタンをクリックすると、エラー メッセージが表示され、フォーム送信がキャンセルされることが確認できます。
jQuery Validation の中心となるのは入力値検証を行う validate メソッドです。validate メソッドにはハッシュ形式で検証に必要な情報を渡します。ここでは最低限の動作に必要な errorClass (エラー メッセージを表示する際に適用するスタイル)、rules (検証ルール)、messages (エラー メッセージ) を指定しています。
rules、messages パラメータには、更に「要素名: {検証ルール名: 値}, ...」の形式で検証ルールとエラー メッセージを登録します。指定できる値 (検証パラメータ) は検証ルールに応じて変動します。たとえば、rangelength (文字列長) 検証であれば最小長、最大長を配列形式で渡しますが、required (必須検証)、dateISO (日付型検証) などでは検証を有効にするための true を渡します。
エラー メッセージには $.format メソッドを利用することで、検証パラメータを埋め込むこともできます。{0}、{1} が検証パラメータを埋め込むためのプレースホルダです。