[解決済み] BootstrapとjQuery Validationプラグイン

質問

jQuery Validation Pluginを使ってフォームにバリデーションを追加しようとしているのですが、入力グループを使用しているときに、プラグインがエラーメッセージを表示する問題があります。

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

私のコード http://jsfiddle.net/hTPY7/4/

解決方法は？

twitter bootstrap 3との完全な互換性のために、いくつかのプラグインのメソッドをオーバーライドする必要があります。

// override jquery validate plugin defaults
$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

例を参照してください。 http://jsfiddle.net/mapb_1990/hTPY7/7/