JavaScript-引导验证程序

JavaScript - Bootstrap Validator

本文关键字：程序 验证 JavaScript-      更新时间：2023-09-26

我正在使用这个插件：插件链接

如果复选框组中至少有一个复选框被选中，我正在尝试验证。该插件不支持这样的功能。因此，我在谷歌上搜索了插件作者自己的文章：讨论链接和工作实现：示例

我试着实现它，但失败了。这就是我目前所拥有的：

<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循环中生成的复选框组只是其中的一部分。验证器适用于文本和密码字段，但对复选框组没有任何作用。有什么想法吗？

谢谢！：）

我只是想让它变得整洁
请检查解决方案：

参考：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>

相关文章：