Question

所以我有10个复选框字段，可以选择多于1个，但至少必须选择1个。

我让它使用name=""属性，但情况不再如此，因为名称必须与我们的CRM集成才是唯一的。

所以我添加了规则来使用类而不是使用addClassRule（），我添加了自己的方法来使用自定义消息。

但结果是他们都是必需的。无论是否选择了1个或更多？

这是我的jQuery正在运行，但它需要检查所有10个复选框。

$.validator.addMethod("checkboxRequired", $.validator.methods.required, "Please select at least 1 of the values");
jQuery.validator.addClassRules('checkbox-validate', {
    checkboxRequired: true
});

HTML code：

<div id="id_1" class="form-input">
    <label for="test1"><input class="checkbox-validate" type="checkbox" id="test1" name="test1" value="1">1</label>
    <label for="test2"><input class="checkbox-validate" type="checkbox" id="test2" name="test2" value="2">2</label>
    <label for="test3"><input class="checkbox-validate" type="checkbox" id="test3" name="test3" value="3">3</label>
    <label for="test4"><input class="checkbox-validate" type="checkbox" id="test4" name="test4" value="4">4</label>
    <label for="test5"><input class="checkbox-validate" type="checkbox" id="test5" name="test5" value="5">5</label>
    <label for="test6"><input class="checkbox-validate" type="checkbox" id="test6" name="test6" value="6">6</label>
    <label for="test7"><input class="checkbox-validate" type="checkbox" id="test7" name="test7" value="7">7</label>
    <label for="test8"><input class="checkbox-validate" type="checkbox" id="test8" name="test8" value="8">8</label>
    <label for="test9"><input class="checkbox-validate" type="checkbox" id="test9" name="test9" value="9">9</label>
    <label for="test10"><input class="checkbox-validate" type="checkbox" id="test10" name="test10" value="10">10</label> 
</div>

Answer 1

尝试require_from_group-method规则

jQuery(function($) {
  jQuery.validator.addClassRules('checkbox-validate', {
    require_from_group: [1, ".checkbox-validate"]
  });

  var validator = $('#myform').validate({
    rules: {},
    messages: {},
    errorPlacement: function(error, element) {
      if (element.hasClass('checkbox-validate')) {
        element.closest('.form-input').find('.error-holder').html(error)
      } else {
        error.insertAfter(element);
      }
    }
  });
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>


<form id="myform" method="post" action="">

  <div id="id_1" class="form-input">
    <label for="test1">
      <input class="checkbox-validate" type="checkbox" id="test1" name="test1" value="1" />1</label>
    <label for="test2">
      <input class="checkbox-validate" type="checkbox" id="test2" name="test2" value="2" />2</label>
    <label for="test3">
      <input class="checkbox-validate" type="checkbox" id="test3" name="test3" value="3" />3</label>
    <label for="test4">
      <input class="checkbox-validate" type="checkbox" id="test4" name="test4" value="4" />4</label>
    <label for="test5">
      <input class="checkbox-validate" type="checkbox" id="test5" name="test5" value="5" />5</label>
    <label for="test6">
      <input class="checkbox-validate" type="checkbox" id="test6" name="test6" value="6" />6</label>
    <label for="test7">
      <input class="checkbox-validate" type="checkbox" id="test7" name="test7" value="7" />7</label>
    <label for="test8">
      <input class="checkbox-validate" type="checkbox" id="test8" name="test8" value="8" />8</label>
    <label for="test9">
      <input class="checkbox-validate" type="checkbox" id="test9" name="test9" value="9" />9</label>
    <label for="test10">
      <input class="checkbox-validate" type="checkbox" id="test10" name="test10" value="10" />10</label>
    <span class="error-holder"></span>
  </div>

  <input type="submit" value="Save" />
</form>

Answer 2

您需要将您的name属性设置为相同的值。然后你可以检查检查的数量：

var count = $('input[name=test]:checked').size();

addClassRules（）到多个字段但至少只允许1

2 个答案: