引导3与jQueryvalidation插件

我试图添加validation到我的forms与jQueryvalidation插件，但我有一个问题，当我使用input组插入错误消息。

$('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/

Answer 1

为了完全兼容twitter引导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/

Answer 2

为了与Bootstrap 3完全兼容，我添加了对input组 ， 收音机和checkbox的支持 ，这在其他解决scheme中是缺less的。

更新10/20/2017 ：检查了其他答案的build议，并添加了对无线电内联特殊标记的额外支持，为一组无线电或checkbox提供了更好的错误放置，并增加了对自定义.novalidation类的支持，以防止validation控件。 希望这有助于和感谢您的build议。

包含validation插件后，添加以下调用：

 $.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表单类。 如果您使用水平表单，则必须使用以下标记。 这可确保帮助块文本遵守表单组的validation状态（“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> 

Answer 3

我只使用Twitter Bootstrap 3devise的表单。我为validor设置了默认函数，只运行带规则的validate方法。 我使用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>'); } } }); 

完成。 运行validationfunction之后：

 $("#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" } } }); 

JSFiddle示例

Answer 4

在Miguel Borges上面添加回答，您可以通过在高亮/高亮代码块中添加以下行来为用户提供绿色成功反馈。

  highlight: function(element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); } 

Answer 5

这是您需要的解决scheme，您可以使用errorPlacement方法来覆盖放置错误消息的位置

 $('form').validate({ rules: { firstname: { minlength: 3, maxlength: 15, required: true }, lastname: { minlength: 3, maxlength: 15, required: true } }, errorPlacement: function(error, element) { error.insertAfter('.form-group'); //So i putted it after the .form-group so it will not include to your append/prepend group. }, highlight: function(element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error'); } }); 

这对我来说就像魔术一样。 干杯

Answer 6

以下是我在添加validation表单时使用的内容：

 // Adding validation to form. $(form).validate({ rules: { title: { required: true, minlength: 3, }, server: { ipAddress: true, required: true } }, highlight: function(element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, success: function(element) { $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); }, errorClass: 'help-block' }); 

这对我使用jqueryvalidation库时的Bootstrap 3样式有效。

Answer 7

我用这个收音机的：

  if (element.prop("type") === "checkbox" || element.prop("type") === "radio") { error.appendTo(element.parent().parent()); } else if (element.parent(".input-group").length) { error.insertAfter(element.parent()); } else { error.insertAfter(element); } 

这样错误显示在最后一个无线电选项下。

Answer 8

这构成了领域

  $("#form_questionario").validate({ debug: false, errorElement: "span", errorClass: "help-block", highlight: function (element, errorClass, validClass) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function (element, errorClass, validClass) { $(element).closest('.form-group').removeClass('has-error'); }, errorPlacement: function (error, element) { if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') { error.insertBefore(element.parent()); } else { error.insertAfter(element); } }, // Specify the validation rules rules: { 'campo1[]': 'required', 'campo2[]': 'required', 'campo3[]': 'required', 'campo4[]': 'required', 'campo5[]': 'required' }, submitHandler: function (form) { form.submit(); } }); 

Answer 9

添加无线电在线修复此https://stackoverflow.com/a/18754780/966181

 $.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 if (element.parent('.radio-inline').length) { error.insertAfter(element.parent().parent()); } else { error.insertAfter(element); } } }); 

Answer 10

DARK_DIESEL的回答对我很好， 这里是任何想要使用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('span.glyphicon').remove(); $(element).closest('.form-group').append('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>'); } }, 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('span.glyphicon').remove(); $(element).closest('.form-group').append('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>'); } } }); 

Answer 11

我知道这个问题是Bootstrap 3，但是一些Bootstrap 4相关的问题被redirect到了这个副本，下面是Bootstrap 4兼容的代码片段：

 $.validator.setDefaults({ highlight: function(element) { $(element).closest('.form-group').addClass('has-danger'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-danger'); }, errorElement: 'small', errorClass: 'form-control-feedback d-block', errorPlacement: function(error, element) { if(element.parent('.input-group').length) { error.insertAfter(element.parent()); } else if(element.prop('type') === 'checkbox') { error.appendTo(element.parent().parent().parent()); } else if(element.prop('type') === 'radio') { error.appendTo(element.parent().parent().parent()); } else { error.insertAfter(element); } }, }); 

less数差异是：

• 类的使用has-danger而不是has-error
• 更好的错误定位无线电和checkbox

Answer 12

另一种select是提前在表单组外部放置一个错误容器。 validation器将在必要时使用它。

 <div class="form-group"> <label class="control-label" for="new-task-due-date">When is the task due?</label> <div class="input-group date datepicker"> <input type="text" id="new-task-due-date" class="required form-control date" name="dueDate" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> <label for="new-task-due-date" class="has-error control-label" style="display: none;"></label> </div>