复选框的jquery验证插件-至少选择一个

我正在使用jquery验证插件进行表单字段验证。我在表单中有多个复选框。我尝试了两种不同的方法来实现逻辑“至少需要选择一个”，但是什么都不起作用，但是当我尝试验证插件之外的东西时，这段代码可以正常工作。如果你能告诉我如何将下面的代码合并到验证插件中

 <script type="text/javascript">
$(document).ready(function () {
    $('.submit').click(function() {
      checked = $("input[type=checkbox]:checked").length;

      if(!checked) {
         // <form:errors path="chk" cssClass="errors" element="div" />
         $(".form-error").text("* You must check at least one checkbox.").show();
       // alert("You must check at least one checkbox.");
        return false;
      }

    });
});
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
 <script>


  $(document).ready(function(){

      $("#myForm").validate({



      rules: {
          crcode: "required",
          dtype: "required",
          pview: "required",
          prview: "required",


      },

      messages: {
          crcode: "Rate code is required",
          dtype: "Dwell type is required",
          pview: "Public view is required",
          prview: "Private view is required",


      }

      });
      });

  </script>
Here are my checkboxes
 <div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;" >
            <input type="checkbox" name="chkbox" id="fancy-checkbox-default1" autocomplete="off" class="fancy" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-default1" class="[ btn btn-default ]">
                    <span class="[ glyphicon glyphicon-ok ]"></span>
                    <span> </span>
                </label>
                <label for="fancy-checkbox-default1" class="[ btn btn-default active ]">
                   Video+Internet
                </label>
            </div>
        </div>
 <div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;">
            <input type="checkbox" name="chkbox" id="fancy-checkbox-default2" autocomplete="off"  class="fancy" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-default2" class="[ btn btn-default ]">
                    <span class="[ glyphicon glyphicon-ok ]"></span>
                    <span> </span>
                </label>
                <label for="fancy-checkbox-default2" class="[ btn btn-default active ]">
                   Video+Phone&nbsp;&nbsp;
                </label>
            </div>
        </div>
 <div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;">
            <input type="checkbox" name="chkbox" id="fancy-checkbox-default3" autocomplete="off" class="fancy" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-default3" class="[ btn btn-default ]">
                    <span class="[ glyphicon glyphicon-ok ]"></span>
                    <span> </span>
                </label>
                <label for="fancy-checkbox-default3" class="[ btn btn-default active ]">
                   Video+Security
                </label>
            </div>
        </div>

$（文档）.ready（函数（）{
$（'.submit'）。单击（函数（）{
选中=$（“输入[类型=复选框]：选中”）。长度；
如果（！选中）{
// 
$（“.form error”）.text（“*您必须至少选中一个复选框。”）.show（）；
//警报（“您必须至少选中一个复选框。”）；
返回false；
}
});
});
$（文档）.ready（函数（）{
$（“#myForm”）。验证({
规则：{
crcode:“必需”，
数据类型：“必需”，
pview：“必需”，
prview：“必需”，
},
信息：{
crcode:“需要费率代码”，
数据类型：“需要驻留类型”，
pview：“需要公共视图”，
prview：“需要私有视图”，
}
});
});
这是我的复选框
视频+互联网
视频+电话
视频+安全

如果你能告诉我如何将下面的代码合并到验证插件中

 <script type="text/javascript">
$(document).ready(function () {
    $('.submit').click(function() {
      checked = $("input[type=checkbox]:checked").length;

      if(!checked) {
         // <form:errors path="chk" cssClass="errors" element="div" />
         $(".form-error").text("* You must check at least one checkbox.").show();
       // alert("You must check at least one checkbox.");
        return false;
      }

    });
});
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
 <script>


  $(document).ready(function(){

      $("#myForm").validate({



      rules: {
          crcode: "required",
          dtype: "required",
          pview: "required",
          prview: "required",


      },

      messages: {
          crcode: "Rate code is required",
          dtype: "Dwell type is required",
          pview: "Public view is required",
          prview: "Private view is required",


      }

      });
      });

  </script>
Here are my checkboxes
 <div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;" >
            <input type="checkbox" name="chkbox" id="fancy-checkbox-default1" autocomplete="off" class="fancy" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-default1" class="[ btn btn-default ]">
                    <span class="[ glyphicon glyphicon-ok ]"></span>
                    <span> </span>
                </label>
                <label for="fancy-checkbox-default1" class="[ btn btn-default active ]">
                   Video+Internet
                </label>
            </div>
        </div>
 <div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;">
            <input type="checkbox" name="chkbox" id="fancy-checkbox-default2" autocomplete="off"  class="fancy" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-default2" class="[ btn btn-default ]">
                    <span class="[ glyphicon glyphicon-ok ]"></span>
                    <span> </span>
                </label>
                <label for="fancy-checkbox-default2" class="[ btn btn-default active ]">
                   Video+Phone&nbsp;&nbsp;
                </label>
            </div>
        </div>
 <div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;">
            <input type="checkbox" name="chkbox" id="fancy-checkbox-default3" autocomplete="off" class="fancy" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-default3" class="[ btn btn-default ]">
                    <span class="[ glyphicon glyphicon-ok ]"></span>
                    <span> </span>
                </label>
                <label for="fancy-checkbox-default3" class="[ btn btn-default active ]">
                   Video+Security
                </label>
            </div>
        </div>

你没有

该代码与jQuery验证插件一起使用毫无意义，可以完全删除。使用jQuery验证插件时，不需要为复选框验证编写完全独立的函数，也不需要任何类型的点击处理程序

您只需在复选框名称上声明

required

规则，插件将自动使至少一个复选框成为required

$(document).ready(function(){

      $("#myForm").validate({
          rules: {
              chkbox: "required", // <- add this
              crcode: "required",
              dtype: "required",
              pview: "required",
              prview: "required",
          },
          messages: {
              chkbox: "* You must check at least one checkbox.", // <- add this
              crcode: "Rate code is required",
              dtype: "Dwell type is required",
              pview: "Public view is required",
              prview: "Private view is required",
          }
      });

});

如果你能告诉我如何将下面的代码合并到验证插件中

 <script type="text/javascript">
$(document).ready(function () {
    $('.submit').click(function() {
      checked = $("input[type=checkbox]:checked").length;

      if(!checked) {
         // <form:errors path="chk" cssClass="errors" element="div" />
         $(".form-error").text("* You must check at least one checkbox.").show();
       // alert("You must check at least one checkbox.");
        return false;
      }

    });
});
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
 <script>


  $(document).ready(function(){

      $("#myForm").validate({



      rules: {
          crcode: "required",
          dtype: "required",
          pview: "required",
          prview: "required",


      },

      messages: {
          crcode: "Rate code is required",
          dtype: "Dwell type is required",
          pview: "Public view is required",
          prview: "Private view is required",


      }

      });
      });

  </script>
Here are my checkboxes
 <div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;" >
            <input type="checkbox" name="chkbox" id="fancy-checkbox-default1" autocomplete="off" class="fancy" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-default1" class="[ btn btn-default ]">
                    <span class="[ glyphicon glyphicon-ok ]"></span>
                    <span> </span>
                </label>
                <label for="fancy-checkbox-default1" class="[ btn btn-default active ]">
                   Video+Internet
                </label>
            </div>
        </div>
 <div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;">
            <input type="checkbox" name="chkbox" id="fancy-checkbox-default2" autocomplete="off"  class="fancy" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-default2" class="[ btn btn-default ]">
                    <span class="[ glyphicon glyphicon-ok ]"></span>
                    <span> </span>
                </label>
                <label for="fancy-checkbox-default2" class="[ btn btn-default active ]">
                   Video+Phone&nbsp;&nbsp;
                </label>
            </div>
        </div>
 <div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;">
            <input type="checkbox" name="chkbox" id="fancy-checkbox-default3" autocomplete="off" class="fancy" />
            <div class="[ btn-group ]">
                <label for="fancy-checkbox-default3" class="[ btn btn-default ]">
                    <span class="[ glyphicon glyphicon-ok ]"></span>
                    <span> </span>
                </label>
                <label for="fancy-checkbox-default3" class="[ btn btn-default active ]">
                   Video+Security
                </label>
            </div>
        </div>

你没有

该代码与jQuery验证插件一起使用毫无意义，可以完全删除。使用jQuery验证插件时，不需要为复选框验证编写完全独立的函数，也不需要任何类型的点击处理程序

您只需在复选框名称上声明

required

规则，插件将自动使至少一个复选框成为required

$(document).ready(function(){

      $("#myForm").validate({
          rules: {
              chkbox: "required", // <- add this
              crcode: "required",
              dtype: "required",
              pview: "required",
              prview: "required",
          },
          messages: {
              chkbox: "* You must check at least one checkbox.", // <- add this
              crcode: "Rate code is required",
              dtype: "Dwell type is required",
              pview: "Public view is required",
              prview: "Private view is required",
          }
      });

});

---

当我在JSFIDLE上单独尝试表单的这一部分时，它工作得很好，但当我尝试提交整个表单时，它不工作。。有东西阻止了复选框验证和剩余的验证工作正常不确定是什么导致了问题您能告诉我当我提交整个文件时，为什么它不能只用于复选框验证的可能原因吗form@uidev，我只知道你在作品中的表现很好，您不应该编写额外的代码来代替修复根本问题。您必须仔细地将代码与JSFIDLE进行比较，并寻找任何差异。我想知道是否需要同时触发validate（）方法和包含click事件的函数，以便在同一时间显示输出。我如何做到这一点。现在，单击事件在验证之前触发method@uidev，什么点击事件？我已经向您展示了，您不需要捕获点击，也不需要任何与之相关的代码。

.validate（）

方法用于初始化，只需在DOM就绪时调用一次。只需遵循JSFIDLE中使用的代码即可。当我在JSFIDLE上仅尝试表单的这一部分时，这可以正常工作，但当我尝试提交整个表单时，这不起作用。。有东西阻止了复选框验证和剩余的验证工作正常不确定是什么导致了问题您能告诉我当我提交整个文件时，为什么它不能只用于复选框验证的可能原因吗form@uidev，我只知道你在作品中的表现很好，您不应该编写额外的代码来代替修复根本问题。您必须仔细地将代码与JSFIDLE进行比较，并寻找任何差异。我想知道是否需要同时触发validate（）方法和包含click事件的函数，以便在同一时间显示输出。我如何做到这一点。现在，单击事件在验证之前触发method@uidev，什么点击事件？我已经向您展示了，您不需要捕获点击，也不需要任何与之相关的代码。

.validate（）

方法用于初始化，只需在DOM就绪时调用一次。只需遵循JSFIDLE中使用的代码即可。