選擇字段的引導程序驗證程序

Question

試圖要求在啓用提交單擊之前，下拉選擇框都具有選定的選項。缺少什麼是不允許插件檢查驗證？

FORM：

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

Answer 1

爲了使BootstrapValidator工作與其他插件一起，你應該遵循以下兩條規則：

1. 不排除田間如果插件變化領域的知名度

有些插件隱藏自己的領域，創造新的元素來改變現場的樣子。默認情況下，隱藏的不可見字段將不會被驗證。因此，您需要設置

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例子。