2015-12-07 48 views
1

我使用這個插件:Plugin Link的JavaScript - 引導驗證

我試圖驗證,如果至少一個複選框了一個複選框組已被選中。該插件不支持這種功能。因此,我GOOGLE了一下,發現這個,由插件作者自己:Discussion Link和這裏的工作實現:Example

我試着實現它,並失敗。這是我到目前爲止有:

<div class="col-lg-9"> 

       <?php 
       // Input form for choosing complaints 
       foreach (Complaints::getComplaints() as $complaint) { 
        ?> 

        <div class="form-group"> 
         <div class="checkbox"> 
          <label> 
           <input type="checkbox" name="complaints[]" data-chkgrp="complaints[]" 
             data-error="Try selecting at least one..."> 
           <?= Helper::sanitize($complaint->getName()) ?> 
          </label> 

          <div class="help-block with-errors"></div> 
         </div> 
        </div> 

        <?php 
       } 
       ?> 

      </div> 

加上這是JS複製的功能,應該做的魔力...:

<script> 
$('[data-toggle="validator"]').validator({ 
    custom: { 
     chkgrp: function ($el) { 
      console.log("Some debug output, if it is triggered at all" + $el); 
      var name = $el.data("chkgrp"); 
      var $checkboxes = $el.closest("form").find('input[name="' + name + '"]'); 

      return $checkboxes.is(":checked"); 
     } 
    }, 
    errors: { 
     chkgrp: "Choose atleast one!" 
    } 
}).on("change.bs.validator", "[data-chkgrp]", function (e) { 
    var $el = $(e.target); 
    console.log("Does is even work? " + $el); 
    var name = $el.data("chkgrp"); 
    var $checkboxes = $el.closest("form").find('input[name="' + name + '"]'); 

    $checkboxes.not(":checked").trigger("input"); 
}); 

所以鎰。沒有任何反應,如果我嘗試運行這個。我的調試輸出沒有打印在控制檯中。沒有。表單本身也包含一些密碼字段和文本字段,在foreach循環中生成的複選框組只是其中的一部分。驗證器適用於文本和密碼字段,但對複選框組完全沒有任何作用。有任何想法嗎?

謝謝! :)

+0

可以提供PHP處理後的HTML? –

回答

1

我只是試圖使它整潔。
請結帳解決方案:

參考:http://1000hz.github.io/bootstrap-validator/

$('#form').validator().on('submit', function (e) { 
 
    var validate = false; 
 
    $("input[type='checkbox']").each(function(index,e){ 
 
    
 
    if($(e).is(':checked')) 
 
     validate = true; 
 
    }); 
 
    
 
    if(validate){ 
 
    //valid 
 
    $('.with-errors').html(' '); 
 
    } else { 
 
    $('.with-errors').html('not valid'); 
 

 
    } 
 
    
 
    //if (e.isDefaultPrevented()) { 
 
    // handle the invalid form... 
 
    //} else { 
 
    // everything looks good! 
 
    //} 
 
})
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 

 

 

 
<form role="form" data-toggle="validator" id="form" action="" method="POST"> 
 
<div class="col-lg-9"> 
 

 

 
    <div class="form-group"> 
 
    <div class="checkbox"> 
 
     <label> 
 
     <input type="checkbox" name="complaints[]" data-chkgrp="complaints[]" data-error="Try selecting at least one..."> 
 
     Teste1 
 
     </label> 
 
    
 
     <div class="help-block "></div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="form-group"> 
 
    <div class="checkbox"> 
 
     <label> 
 
     <input type="checkbox" name="complaints[]" data-chkgrp="complaints[]" data-error="Try selecting at least one..."> 
 
     Teste2 
 
     </label> 
 
    
 
     <div class="help-block with-errors"></div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="form-group"> 
 
    <div class="checkbox"> 
 
     <label> 
 
     <input type="checkbox" name="complaints[]" data-chkgrp="complaints[]" data-error="Try selecting at least one..."> 
 
     Teste3 
 
     </label> 
 
    
 
     <div class="help-block with-errors"></div> 
 
    </div> 
 
    </div> 
 
    
 

 
</div> 
 
    <button type="submit" >Validade</button> 
 
    </form>

+1

非常感謝。我將代碼更改爲以下內容: if(validate){(「。checkbox .with-errors」)。html(「」); (「#registerForm」)。find(「:submit」)。prop(「disabled」,false); (「。checkbox.with-errors」)。html(「Select a least one」)。css(「color」,「rgb(169,68,66)」);其他{0} (「#registerForm」)。find(「:submit」)。prop(「disabled」,true); } – BoA456