我正在尝试使用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');
}
});
发布于 2013-09-12 11:19:54
为了与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);
}
}
});
发布于 2013-09-25 21:37:57
为了与Bootstrap 3完全兼容,我添加了对输入组、无线和复选框的支持,这在其他解决方案中是缺失的。
更新10/20/2017:检查了其他答案的建议,添加了对无线电-内联的特殊标记的额外支持,为一组无线电或复选框提供了更好的错误放置,并添加了对自定义.novalidation类的支持,以防止控件的验证。希望这能对你有所帮助,谢谢你的建议。
在包含验证插件之后,添加以下调用:
$.validator.setDefaults({
errorElement: "span",
errorClass: "help-block",
highlight: function (element, errorClass, validClass) {
// Only validation controls
if (!$(element).hasClass('novalidation')) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
}
},
unhighlight: function (element, errorClass, validClass) {
// Only validation controls
if (!$(element).hasClass('novalidation')) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
}
},
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
}
else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
error.insertAfter(element.parent().parent());
}
else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
error.appendTo(element.parent().parent());
}
else {
error.insertAfter(element);
}
}
});
这适用于所有Bootstrap 3表单类。如果您使用水平表单,则必须使用以下标记。这确保了帮助块文本遵守验证状态("has-error",...)窗体组的。
<div class="form-group">
<div class="col-lg-12">
<div class="checkbox">
<label id="LabelConfirm" for="CheckBoxConfirm">
<input type="checkbox" name="CheckBoxConfirm" id="CheckBoxConfirm" required="required" />
I have read all the information
</label>
</div>
</div>
</div>
发布于 2014-07-18 21:34:14
我使用只使用Twitter Bootstrap 3设计的表单。我为validor设置了默认函数,并只运行带规则的验证方法。我使用的是FontAweSome中的图标,但你也可以使用文档示例中的Glyphicons。
jQuery.validator.setDefaults({
highlight: function (element, errorClass, validClass) {
if (element.type === "radio") {
this.findByName(element.name).addClass(errorClass).removeClass(validClass);
} else {
$(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
$(element).closest('.form-group').find('i.fa').remove();
$(element).closest('.form-group').append('<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');
}
},
unhighlight: function (element, errorClass, validClass) {
if (element.type === "radio") {
this.findByName(element.name).removeClass(errorClass).addClass(validClass);
} else {
$(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
$(element).closest('.form-group').find('i.fa').remove();
$(element).closest('.form-group').append('<i class="fa fa-check fa-lg form-control-feedback"></i>');
}
}
});
好了。运行验证函数后:
$("#default-register-user").validate({
rules: {
'login': {
required: true,
minlength: 5,
maxlength: 20
},
'email': {
required: true,
email: true,
minlength: 5,
maxlength: 100
},
'password': {
required: true,
minlength: 6,
maxlength: 25
},
'confirmpassword': {
required: true,
minlength: 5,
maxlength: 25,
equalTo: "#password"
}
}
});
https://stackoverflow.com/questions/18754020
复制相似问题