2016-11-06 37 views
1

有没有人提供jquery.validate插件与Daniel Farrel创建的bootstrap-combobox一起工作?bootstrap-combobox(Daniel Farrel)和jquery-validaiton-plugin

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

回答

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) { .... 
+1

它曾在第一次尝试!非常感谢,你救了我的一天。 – user1611183

+0

不客气。 – Sparky

+0

任何想法如何删除“errorClass”:)?一旦该字段(组合框)被验证,它就会一直在那里。而它与其他领域正确隐藏。 – user1611183