Bootstrap 3验证 [英] Bootstrap 3 Validation
本文介绍了Bootstrap 3验证的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我认为我几乎可以进行Bootstrap验证了,但是似乎有错误或我丢失了一些东西.使用输入组时,如何使图标显示在文本字段中.另一个问题是当它出错并且用户对其进行修复时,x图标仍然存在,而不是复选框.
I think I almost have Bootstrap validation working but it seems buggy or i'm missing something. When using an input-group how do I make the icon show up in the text field. The other problem is when it errors out and the user fixes it the x icon is still there instead of a checkbox.
$('form').validate({
rules: {
field1: {
minlength: 3,
maxlength: 15,
required: true
},
field2: {
minlength: 3,
maxlength: 15,
required: true
}
},
highlight: function(element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error')
$(element).next('span').removeClass('glyphicon-ok').addClass('glyphicon-remove');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success')
$(element).next('span').removeClass('glyphicon-remove').addClass('glyphicon-ok');
},
//errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
推荐答案
问题是,下一个兄弟可能是错误消息标签而不是反馈
The problem is, the next sibling can be the error message label not the feedback
$('form').validate({
rules: {
field1: {
minlength: 3,
maxlength: 15,
required: true
},
field2: {
minlength: 3,
maxlength: 15,
required: true
}
},
highlight: function (element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error')
$(element).parent().find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
$(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok');
},
//errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
演示:小提琴
这篇关于Bootstrap 3验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文