jQuery
TwitterBootstrap

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

More than 5 years have passed since last update.

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>