nissuk · January 15, 2011 06:58
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>jQuery Validation Pluginの簡単なサンプル</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
    <script>(function(){
      // 標準メッセージの上書き(日本語化等)とカスタム項目のメッセージを設定します。
      $.extend($.validator.messages, {
        email: 'メールアドレスの形式で入力して下さい。(例: [email protected])',
        equalTo: 'もう一度同じ値を入力して下さい。',
        minlength: '{0}文字以上入力して下さい。',
        required: '入力して下さい。',

        // (カスタム項目の標準メッセージです)
        postal: '郵便番号の形式で入力して下さい。(例: 000-0000, 0000000)',
        username: '半角英数字、アンダースコア(_)のいずれかで入力して下さい。',
      });

      // 入力項目の検証ルールを定義します(後で$.validate({ rules: rules })で設定します)。
      var rules = {
        username: 'username',
        email_confirm: { equalTo: '[name=email]' },
        password: { minlength: 6 },
        password_confirm: { equalTo: '[name=password]' },
        postal: 'postal'
      };

      // 入力項目ごとにエラーメッセージを定義します(後で$.validate({ messages: messages })で設定します)
      var messages = {
        username: {
          required: 'ユーザー名を入力して下さい。',
        },
        password: {
          required: 'パスワードを入力して下さい。',
          minlength: 'パスワードは{0}文字以上入力して下さい。'
        }
      };

      // カスタムルールを定義します($.validator.addMethod(項目名, 検証ルール)で設定します)。
      var methods = {
        postal: function(value, element){
          return this.optional(element) || /^[0-9]{3}-?[0-9]{4}$/.test(value);
        },
        username: function(value, element){
          return this.optional(element) || /[a-zA-Z0-9_]/.test(value);
        }
      };
      $.each(methods, function(key){
        $.validator.addMethod(key, this);
      });

      $(function(){
        $('#form').validate({
          rules: rules,
          messages: messages,

          //// (下記コメントを外すと一箇所にエラーメッセージが出力されます)
          //errorContainer: $("#form .error-container"),
          //errorLabelContainer: $("#form .error-container ul"),
          //wrapper: 'li',

          // エラーの位置を設定します。
          // 下記ではラジオボタンとチェックボックスのエラーメッセージを
          // グループの最後に表示するように調整しています。
          errorPlacement: function(error, element){
            if (element.is(':radio, :checkbox')) {
              error.appendTo(element.parent());
            } else {
              error.insertAfter(element);
            }
          }
        });
      });
    })();</script>
    <style>
      body { font-size: 12px }
      table { border-collapse: collapse }
      th, td { padding: 4px; border: 1px solid black }
      tbody th { text-align: left }

      /* 検証エラーメッセージ */
      label.error { color: red }
    </style>
  </head>
  <body>
    <form id="form">
      <div class="error-container"><ul></ul></div>
      <table>
      <tbody>
 	<tr>
 	  <th>ユーザー名</th><td><input name="username" class="required" /></td>
 	</tr>
 	<tr>
 	  <th>氏名</th><td><input name="name" class="required" /></td>
 	</tr>
 	<tr>
 	  <th>性別</th><td>
 	    <input type="radio" id="male" name="gender" value="1" class="required" /><label for="male">男性</label>
            <input type="radio" id="female" name="gender" value="2" /><label for="female">女性</label>
 	  </td>
 	</tr>
 	<tr>
 	  <th>生年月日</th><td><input name="birth" class="date" /></td>
 	</tr>
 	<tr>
 	  <th>郵便番号</th><td>〒<input id="postal" name="postal" class="postal" /></td>
 	</tr>
 	<tr>
 	  <th>住所</th><td><input name="address" class="address" /></td>
 	</tr>
 	<tr>
 	  <th>メールアドレス</th><td><input type="email" name="email" class="email" /></td>
 	</tr>
 	<tr>
 	  <th>メールアドレス(確認)</th><td><input type="email" name="email_confirm" class="email" /></td>
 	</tr>
 	<tr>
 	  <th>パスワード</th><td><input type="password" name="password" class="password" /></td>
 	</tr>
 	<tr>
 	  <th>パスワード(確認)</th><td><input type="password" name="password_confirm" class="password" /></td>
 	</tr>
      </tbody>
      </table>
      <p><input type="submit" value="送信" /></p>
    </form>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>jQuery Validation Pluginの簡単なサンプル</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
	<script>(function(){
	// 標準メッセージの上書き(日本語化等)とカスタム項目のメッセージを設定します。
	$.extend($.validator.messages, {
	email: 'メールアドレスの形式で入力して下さい。(例: [email protected])',
	equalTo: 'もう一度同じ値を入力して下さい。',
	minlength: '{0}文字以上入力して下さい。',
	required: '入力して下さい。',

	// (カスタム項目の標準メッセージです)
	postal: '郵便番号の形式で入力して下さい。(例: 000-0000, 0000000)',
	username: '半角英数字、アンダースコア(_)のいずれかで入力して下さい。',
	});

	// 入力項目の検証ルールを定義します(後で$.validate({ rules: rules })で設定します)。
	var rules = {
	username: 'username',
	email_confirm: { equalTo: '[name=email]' },
	password: { minlength: 6 },
	password_confirm: { equalTo: '[name=password]' },
	postal: 'postal'
	};

	// 入力項目ごとにエラーメッセージを定義します(後で$.validate({ messages: messages })で設定します)
	var messages = {
	username: {
	required: 'ユーザー名を入力して下さい。',
	},
	password: {
	required: 'パスワードを入力して下さい。',
	minlength: 'パスワードは{0}文字以上入力して下さい。'
	}
	};

	// カスタムルールを定義します($.validator.addMethod(項目名, 検証ルール)で設定します)。
	var methods = {
	postal: function(value, element){
	return this.optional(element) \|\| /^[0-9]{3}-?[0-9]{4}$/.test(value);
	},
	username: function(value, element){
	return this.optional(element) \|\| /[a-zA-Z0-9_]/.test(value);
	}
	};
	$.each(methods, function(key){
	$.validator.addMethod(key, this);
	});

	$(function(){
	$('#form').validate({
	rules: rules,
	messages: messages,

	//// (下記コメントを外すと一箇所にエラーメッセージが出力されます)
	//errorContainer: $("#form .error-container"),
	//errorLabelContainer: $("#form .error-container ul"),
	//wrapper: 'li',

	// エラーの位置を設定します。
	// 下記ではラジオボタンとチェックボックスのエラーメッセージを
	// グループの最後に表示するように調整しています。
	errorPlacement: function(error, element){
	if (element.is(':radio, :checkbox')) {
	error.appendTo(element.parent());
	} else {
	error.insertAfter(element);
	}
	}
	});
	});
	})();</script>
	<style>
	body { font-size: 12px }
	table { border-collapse: collapse }
	th, td { padding: 4px; border: 1px solid black }
	tbody th { text-align: left }

	/* 検証エラーメッセージ */
	label.error { color: red }
	</style>
	</head>
	<body>
	<form id="form">
	<div class="error-container"><ul></ul></div>
	<table>
	<tbody>
	<tr>
	<th>ユーザー名</th><td><input name="username" class="required" /></td>
	</tr>
	<tr>
	<th>氏名</th><td><input name="name" class="required" /></td>
	</tr>
	<tr>
	<th>性別</th><td>
	<input type="radio" id="male" name="gender" value="1" class="required" /><label for="male">男性</label>
	<input type="radio" id="female" name="gender" value="2" /><label for="female">女性</label>
	</td>
	</tr>
	<tr>
	<th>生年月日</th><td><input name="birth" class="date" /></td>
	</tr>
	<tr>
	<th>郵便番号</th><td>〒<input id="postal" name="postal" class="postal" /></td>
	</tr>
	<tr>
	<th>住所</th><td><input name="address" class="address" /></td>
	</tr>
	<tr>
	<th>メールアドレス</th><td><input type="email" name="email" class="email" /></td>
	</tr>
	<tr>
	<th>メールアドレス(確認)</th><td><input type="email" name="email_confirm" class="email" /></td>
	</tr>
	<tr>
	<th>パスワード</th><td><input type="password" name="password" class="password" /></td>
	</tr>
	<tr>
	<th>パスワード(確認)</th><td><input type="password" name="password_confirm" class="password" /></td>
	</tr>
	</tbody>
	</table>
	<p><input type="submit" value="送信" /></p>
	</form>
	</body>
	</html>