bootstrap-combobox（Daniel Farrel）和jquery-validaiton-plugin

Question

有沒有人提供jquery.validate插件與Daniel Farrel創建的bootstrap-combobox一起工作？

jquery.validate插件與其餘的引導程序元素很好地工作，但無法使用bootstrap組合框工作。

下面是HTML：

<div class="row"> 
       <div class="col-sm-4"> 
        <label for="categoryParent" class="control-label">Category</label> 
       </div> 
       <div class="col-sm-8"> 
        <select id="categoryParent" name="categoryParent" class="combobox form-control"> 
         <option value="" selected="selected">Select the category</option> 
<option>...</option> 

        </select> 
       </div> 
      </div> 

和JS：

$.validator.setDefaults({ 
     highlight: function(element) { 
      $(element).closest('.row').addClass('has-error'); 
     }, 
     unhighlight: function(element) { 
      $(element).closest('.row').removeClass('has-error'); 
     }, 
     errorElement: 'span', 
     errorClass: 'help-block', 
     errorPlacement: function(error, element) { 
      error.insertAfter(element); 
     } 
    }); 

    $("#addProductForm").validate({ 
     rules: { 
      categoryParent: {required: true} 
     }, 
     messages: {     
      categoryParent : "Category required" 

     }, 
     invalidHandler: function() { 
      $("#cc-alert").css("display","block"); 
     }, 
     submitHandler: function() { 

    // 
    // more code 
    // 


      return false; 
     } 

Answer 1

引導組合框隱藏原始select和更多的東西悅目替換它。但是，jQuery Validate插件只能驗證原始的select元素，但也會因爲隱藏而忽略它。

你只需要使用the ignore option告訴它validate hidden elements。

ignore: [] // ignore nothing, validate everything 

在您的代碼：

$("#addProductForm").validate({ 
    ignore: [], 
    rules: { .... 

OR：

$.validator.setDefaults({ 
    ignore: [], 
    highlight: function(element) { ....