复选框的jquery验证插件-至少选择了一个 [英] jquery validation plugin for checkbox- at least one selected

问题描述

我正在使用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>

解决方案

如果您能告诉我如何将以下代码整合到验证插件中

$('.submit').click(function() {
    checked = $("input[type=checkbox]:checked").length;
    if (!checked) { ....

你没有.

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

您只需要在复选框名称上声明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",
          }
      });

});

演示: http://jsfiddle.net/42t2twLo/

可以使用 errorPlacement选项来简化此复选框错误消息的确切位置.. >

errorPlacement: function(error, element) {
    if (element.is(":checkbox")) {
        error.insertBefore(element);  // custom placement example
    } else { 
        error.insertAfter(element);   // default placement
    }
}

I am using jquery validation plugin for form fields validation. I have multiple checkboxes in the form. I tried couple of different ways for the logic 'at least one need to be selected' but nothing is working but when i try something out of validation plugin its working fine with this code. If you can tell me how i can incorporate this below code within validation plugin

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

解决方案

if you can tell me how I can incorporate this below code within validation plugin

$('.submit').click(function() {
    checked = $("input[type=checkbox]:checked").length;
    if (!checked) { ....

You don't.

That code makes no sense for use with jQuery Validate plugin and can be removed entirely. When using the jQuery Validate plugin, you do not need to write a wholly independent function for checkbox validation, NOR do you need a click handler of any kind.

You simply need to declare the required rule on the checkbox name and the plugin will automatically make at least one checkbox 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",
          }
      });

});

DEMO: http://jsfiddle.net/42t2twLo/

Exact placement of this checkbox error message can be facilitated with the errorPlacement option.

errorPlacement: function(error, element) {
    if (element.is(":checkbox")) {
        error.insertBefore(element);  // custom placement example
    } else { 
        error.insertAfter(element);   // default placement
    }
}

这篇关于复选框的jquery验证插件-至少选择了一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！