jQuery ValidationをTwitter Bootstrapと組み合わせて使う

jQuery Validationは名前の通り入力チェックを行うjQuery pluginです。サーバーサイドでチェックを行わないため画面遷移がなく、その場で入力ミスが分かるためユーザービリティーが上がります。

しかし、Twitter Bootstrapでデザインを組んでいると、エラー発生時に入力フォームが赤くならないため、以下のコードを追加します。

errorClass:'error',
errorElement:'span',
highlight: function (element, errorClass, validClass) { 
	$(element).parents("div[class='control-group']").addClass(errorClass); 
}, 
unhighlight: function (element, errorClass, validClass) { 
	$(element).parents(".error").removeClass(errorClass); 
}

利用にはjQueryが必要です。

	<script src="js/jquery-1.8.0.min.js"></script>
	<script src="js/jquery.validate.min.js"></script>

JavaScriptの全体はこんな感じです。

$(document).ready(function() {
	$("#registrationForm").validate({
		errorClass:'error',
		errorElement:'span',
		highlight: function (element, errorClass, validClass) { 
			$(element).parents("div[class='control-group']").addClass(errorClass); 
		}, 
		unhighlight: function (element, errorClass, validClass) { 
			$(element).parents(".error").removeClass(errorClass); 
		},
		rules: {
			username: {
				required: true
			},
			email: {
				required: true
			},
			password: {
				required: true
			},
			confirmPassword: {
				required: true,
				equalTo: ".password"
			}
		},
		messages: {
			username: "ユーザ名を入力してください",
			email: "メールアドレスを入力してください",
			password: "パスワードを入力して下さい",
			confirmPassword: {
				required: "確認用パスワードを入力して下さい",
				equalTo: "パスワードが一致していません"
			}
		}
	});
	//Validation成功時の遷移先
	$("input.validate").click(function() {
		if($("#registrationForm").valid() == true){
			location.href = "confirm.html"
		}
		return false;
	});
});

HTMLはこんな感じ。

<form id="registrationForm" class="form-horizontal well">
	<div class="control-group">
	<label class="control-label" for="username">ユーザ名</label>
		<div class="controls">
			<input type="text" class="span4" name="username">
		</div>
	</div>
	<div class="control-group">
	<label class="control-label" for="email">メールアドレス</label>
		<div class="controls">
			<input type="email" class="span4" name="email">
		</div>
	</div>
	<div class="control-group">
	<label class="control-label" for="twitter">twitterアカウント</label>
		<div class="controls">
			<input type="text" class="span4" name="twitter">
		</div>
	</div>
	<div class="control-group">
	<label class="control-label" for="password">パスワード</label>
		<div class="controls">
			<input type="password" class="password span4" name="password">
		</div>
	</div>
	<div class="control-group">
	<label class="control-label" for="confirmPassword">確認用パスワード</label>
		<div class="controls">
			<input type="password" class="span4" name="confirmPassword">
		</div>
	</div>
	<div class="control-group">
		<div class="controls">
			<input type="submit" class="validate btn btn-primary pull-right" value="確認">
		</div>
	</div>
</form>