尝试要求两个下拉选择框在启用单击提交之前都有一个选择的选项。缺少什么不允许插件检查验证？

表格:

<form role="form" id="bootstrapSelectForm" class="form-horizontal"> 
  <div class="row"> 
  <div class="col-xs-6"> 
  <br> 
      <h5>Region</h5> 
        <select class="form-control" name="region" id="region" > 
                   <option value="">Select a Region</option> 
                   <option value="US">US</option> 
                   <option value="UK">UK</option> 
                   <option value="Sales Team">XS (Sales Team)</option> 
                   <option value="Editorial Test">XT (Editorial Test)</option> 
        </select> 
    </div> 
    <div class="col-xs-6"> 
    <br> 
      <h5>Duration</h5> 
        <select class="form-control" name="duration" id="duration" > 
                   <option value="">Select a Duration</option> 
                   <option value="5">5 Minutes</option> 
                   <option value="10">10 Minutes</option> 
                   <option value="15">15 Minutes</option> 
                   <option value="20">20 Minutes</option> 
                   <option value="25">25 Minutes</option> 
                   <option value="30">30 Minutes</option> 
        </select> 
    </div> 
    <div class="col-xs-6"> 
    <button type="submit" class="btn btn-default" id="submit">Submit</button> 
    </div> 
  </div> 

Bootstrap 验证器:

$(document).ready(function() { 
$('#bootstrapSelectForm') 
    .find('[name="region"]') 
        .selectpicker() 
        .submit(function(e) { 
            $('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'region'); 
        }) 
        .end() 
    .find('[name="duration"]') 
        .selectpicker() 
        .submit(function(e) { 
            $('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'duration'); 
        }) 
        .end() 
    .bootstrapValidator({ 
        feedbackIcons: { 
            valid: 'glyphicon glyphicon-ok', 
            invalid: 'glyphicon glyphicon-remove', 
            validating: 'glyphicon glyphicon-refresh' 
        }, 
        fields: { 
            region: { 
                validators: { 
                    callback: { 
                        message: 'Please select region', 
 
                        } 
                    } 
                } 
            }, 
            duration: { 
                validators: { 
                        message: 'Please select region.' 
                } 
            } 
        } 
    }); 
}); 

请您参考如下方法:

为了制作 Bootstrap 验证器 与其他插件一起使用，您应该遵循以下两条规则:

如果插件更改了字段可见性，请不要排除该字段

一些插件会隐藏您的字段并创建新元素来更改字段的外观。默认情况下，不会验证隐藏的、不可见的字段。因此，您需要设置

 excluded: ':disabled' 

见 excluded选项了解更多信息。

如果插件动态更改其值，则重新验证该字段:

大多数插件在更改字段值后触发事件。通过使用这种事件处理程序，您需要要求 BootstrapValidator 重新验证该字段。

在您的情况下，您只需执行以下操作:

添加 excluded选项。

使用notEmpty验证器而不是 Callback验证器。

而不是使用 .submit使用 .change为了在更改字段时重新验证该字段。

见下面的代码:

$('#bootstrapSelectForm') 
   .find('[name="region"]') 
     .selectpicker() 
       .change(function(e) { 
         $('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'region'); 
       }) 
       .end() 
   .find('[name="duration"]') 
     .selectpicker() 
      .change(function(e) { 
        $('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'duration'); 
      }) 
      .end() 
   .bootstrapValidator({ 
      feedbackIcons: { 
         valid: 'glyphicon glyphicon-ok', 
         invalid: 'glyphicon glyphicon-remove', 
         validating: 'glyphicon glyphicon-refresh' 
      }, 
      excluded: ':disabled', // <=== Add the excluded option 
      fields: { 
         region: { 
            validators: { 
               notEmpty: { // <=== Use notEmpty instead of Callback validator 
                  message: 'Please select region' 
               } 
            } 
         } 
         duration: { 
             validators: { 
                notEmpty: { // <=== Use notEmpty instead of Callback validator 
                   message: 'Please select region.' 
                } 
             } 
         } 
      } 
   } 
 }); 

见 Bootstrap Select示例以获取更多信息。