jQuery 検証プラグインを使用してフォームに検証を追加しようとしていますが、入力グループを使用しているときにプラグインがエラー メッセージを表示するという問題が発生しています。
$('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/
ベストアンサー1
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);
}
}
});