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>