Twitter bootstrap 选择字段的引导验证程序

尝试要求两个下拉选择框在启用“提交”之前都具有所选选项。缺少什么不允许插件检查验证

表格：

<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>

$(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.'
                }
            }
        }
    });
});

---

为了使BootstrapValidator与其他插件协同工作，您应该遵循以下两条规则：

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

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

 excluded: ':disabled'

有关更多信息，请参见选项

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

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

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

• 添加

  excluded

  选项
• 使用

  notEmpty

  validator代替

  Callback

  validator
• 不要使用

  .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.'
                }
             }
         }
      }
   }
 });

$（'bootstrapSelectForm'）
.find（'[name=“region”]'））
.selectpicker（）
.更改（功能（e）{
$（'bootstrapSelectForm'）。bootstrapValidator（'revalidateField'，'region'）；
})
(完)
.find（'[name=“duration”]'））
.selectpicker（）
.更改（功能（e）{
$（'bootstrapSelectForm'）。bootstrapValidator（'revalidateField'，'duration'）；
})
(完)
.bootstrapValidator({
反馈图标：{
有效：“glyphicon glyphicon ok”，
无效：“glyphicon glyphicon删除”，
正在验证：“glyphicon glyphicon刷新”
},
已排除：'：已禁用'//