kazuki-aruga/form.html

## form.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery-Validation-Plugin Bootstrap 連携サンプル</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="jquery.validate.bootstrap3.js"></script>
</head>
<body>
  <div class="container">
    <!-- Bootstrapのフォーム -->
    <form class="form-horizontal" method="get" action="">
      <fieldset>
        <legend>入力フォーム</legend>
        <!-- 各項目を form-group で区切る -->
        <div class="form-group">
          <label for="cname" class="control-label col-xs-3">名前 (必須、少なくとも2文字以上)</label>
          <div class="col-xs-9">
            <input id="cname" name="name" type="text" class="form-control" minlength="2" required>
          </div>
        </div>
        <!-- 各項目を form-group で区切る -->
        <div class="form-group">
          <label for="cemail" class="control-label col-xs-3">メールアドレス (必須)</label>
          <div class="col-xs-9">
            <input id="cemail" type="email" name="email" class="form-control" required>
          </div>
        </div>
        <!-- 各項目を form-group で区切る -->
        <div class="form-group">
          <label for="curl" class="control-label col-xs-3">URL (オプション)</label>
          <div class="col-xs-9">
            <input id="curl" type="url" name="url" class="form-control">
          </div>
        </div>
        <!-- 各項目を form-group で区切る -->
        <div class="form-group">
          <label for="ccomment" class="control-label col-xs-3">コメント (必須)</label>
          <div class="col-xs-9">
            <textarea id="ccomment" name="comment" class="form-control" required></textarea>
          </div>
        </div>
        <div class="btn-group col-xs-9 col-xs-offset-3">
          <button class="btn btn-primary" type="submit">送信</button>
          <button class="btn btn-default" type="reset">クリア</button>
        </div>
      </fieldset>
    </form>
  </div>
</body>
</html>

## jquery.validate.bootstrap3.js
// 初期化処理
(function($) {
  "use strict";
  // Validatorの初期値を変更します
  $.validator.setDefaults({
    // NG項目のclass
    errorClass : 'has-error',
    // OK項目のclass
    validClass : 'has-success',
    // 入力チェックNGの場合、項目のform-groupにerrorClassを設定します
    highlight : function(element, errorClass, validClass) {
      $(element).closest('.form-group').addClass(errorClass).removeClass(validClass);
    },
    // 入力チェックOKの場合、項目のform-groupにvalidClassを設定します
    unhighlight : function(element, errorClass, validClass) {
      $(element).closest('.form-group').removeClass(errorClass).addClass(validClass);
    }
  });
}(jQuery));

// DOM構築後の処理
$(function() {
  "use strict";
  // ページ内のすべてのフォームにValidatorを設定します
  $('form').each(function(index, element) {
    var $form = $(element);
    var validator = $form.validate();

    // フォームがresetされたときの処理
    $form.bind('reset', function() {
      // Validatorをリセットします
      validator.resetForm();
      // フォーム内のすべてのform-groupからerrorClassとvalidClassを削除します
      $form.find('.form-group').each(function(index, element) {
        $(element).removeClass($.validator.defaults.errorClass).removeClass($.validator.defaults.validClass);
      });
    });
  });
});
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>jQuery-Validation-Plugin Bootstrap 連携サンプル</title>
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	<script src="jquery.validate.bootstrap3.js"></script>
	</head>
	<body>
	<div class="container">
	<!-- Bootstrapのフォーム -->
	<form class="form-horizontal" method="get" action="">
	<fieldset>
	<legend>入力フォーム</legend>
	<!-- 各項目を form-group で区切る -->
	<div class="form-group">
	<label for="cname" class="control-label col-xs-3">名前 (必須、少なくとも2文字以上)</label>
	<div class="col-xs-9">
	<input id="cname" name="name" type="text" class="form-control" minlength="2" required>
	</div>
	</div>
	<!-- 各項目を form-group で区切る -->
	<div class="form-group">
	<label for="cemail" class="control-label col-xs-3">メールアドレス (必須)</label>
	<div class="col-xs-9">
	<input id="cemail" type="email" name="email" class="form-control" required>
	</div>
	</div>
	<!-- 各項目を form-group で区切る -->
	<div class="form-group">
	<label for="curl" class="control-label col-xs-3">URL (オプション)</label>
	<div class="col-xs-9">
	<input id="curl" type="url" name="url" class="form-control">
	</div>
	</div>
	<!-- 各項目を form-group で区切る -->
	<div class="form-group">
	<label for="ccomment" class="control-label col-xs-3">コメント (必須)</label>
	<div class="col-xs-9">
	<textarea id="ccomment" name="comment" class="form-control" required></textarea>
	</div>
	</div>
	<div class="btn-group col-xs-9 col-xs-offset-3">
	<button class="btn btn-primary" type="submit">送信</button>
	<button class="btn btn-default" type="reset">クリア</button>
	</div>
	</fieldset>
	</form>
	</div>
	</body>
	</html>
	// 初期化処理
	(function($) {
	"use strict";
	// Validatorの初期値を変更します
	$.validator.setDefaults({
	// NG項目のclass
	errorClass : 'has-error',
	// OK項目のclass
	validClass : 'has-success',
	// 入力チェックNGの場合、項目のform-groupにerrorClassを設定します
	highlight : function(element, errorClass, validClass) {
	$(element).closest('.form-group').addClass(errorClass).removeClass(validClass);
	},
	// 入力チェックOKの場合、項目のform-groupにvalidClassを設定します
	unhighlight : function(element, errorClass, validClass) {
	$(element).closest('.form-group').removeClass(errorClass).addClass(validClass);
	}
	});
	}(jQuery));

	// DOM構築後の処理
	$(function() {
	"use strict";
	// ページ内のすべてのフォームにValidatorを設定します
	$('form').each(function(index, element) {
	var $form = $(element);
	var validator = $form.validate();

	// フォームがresetされたときの処理
	$form.bind('reset', function() {
	// Validatorをリセットします
	validator.resetForm();
	// フォーム内のすべてのform-groupからerrorClassとvalidClassを削除します
	$form.find('.form-group').each(function(index, element) {
	$(element).removeClass($.validator.defaults.errorClass).removeClass($.validator.defaults.validClass);
	});
	});
	});
	});