Question

我正在使用jQuery Validation插件来验证复选框，因为它没有默认选项，应该选择One，并且可以选择最多两个复选框，这些是标准。我没有收到任何错误，也没有验证。我正在扩展它，如下所示，

  <input type="checkbox" name="test[]" />x
   <input type="checkbox" name="test[]"  />y
   <input type="checkbox" name="test[]" />z
     $("#formid").validate({
  rules: {
    test[]: { 

            required: function(elem)
            {
                return $("input.select:checked").length > 0;
            }

          },
messages: { 

    test[]: "You must check at least 1 box"
  }
 });

Answer 1

您的代码存在多个问题。

1）在}内缺少右括号rules。

2）在这种情况下，没有理由对required规则使用函数。默认情况下，该插件可以正常处理checkbox和radio输入，因此使用true就足够了。但是，这只会执行与原始函数相同的逻辑，并验证是否至少检查了一个。

3）如果您还希望仅选中最多两个，那么您需要应用maxlength规则。

4） messages选项缺少规则规范。它可以工作，但是一个自定义消息将适用于同一字段上的所有规则。

5）如果name属性包含括号you must enclose it within quotes。

DEMO：http://jsfiddle.net/K6Wvk/

$(document).ready(function () {

    $('#formid').validate({ // initialize the plugin
        rules: {
            'test[]': {
                required: true,
                maxlength: 2
            }
        },
        messages: {
            'test[]': {
                required: "You must check at least 1 box",
                maxlength: "Check no more than {0} boxes"
            }
        }
    });

});

Answer 2

为我工作：

<div class="col-lg-6">
    <div class="form-group mb-3">
        <label>Vendor Type<span class="text-danger">*</span></label>
        <div class="checkbox checkbox-success checkbox-inline">
            <input type="checkbox" name="vendorType" value="TABLE" id='table'>
            <label class="checkbox-inline" for="table"> Table </label>
        </div>
        <div class="checkbox checkbox-success checkbox-inline">
            <input type="checkbox" name="vendorType" value="MENU" id='menu'>
            <label class="checkbox-inline" for="menu"> Menu </label>
        </div>
        <div class="text-danger vendorType"></div>
    </div>
</div>

验证码：

vendorType: {
    required: true,
    maxlength: 2
},

错误信息：

vendorType: {
    required: "You must check at least 1 box",
    maxlength: "Check no more than {0} boxes"
},

无需执行此操作venderType[] 只需执行 vendorType

Answer 3

您可以在无需额外的js代码的情况下验证组复选框和单选按钮，请参见以下示例。

您的JS应该看起来像：

$("#formid").validate();

您可以使用HTML标签和属性：组复选框[minlength = 2和maxlength = 4]

<fieldset class="col-md-12">
  <legend>Days</legend>
  <div class="form-row">
    <div class="col-12 col-md-12 form-group">
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="1" required="required" data-msg-required="This value is required." minlength="2" maxlength="4" data-msg-maxlength="Max should be 4">Monday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="2">Tuesday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="3">Wednesday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="4">Thursday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="5">Friday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="6">Saturday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="7">Sunday
        </label>
        <label for="daysgroup[]" class="error">Your error message will be display here.</label>
    </div>
  </div>
</fieldset>

您可以首先在这里看到，或者任何一个输入都必须具有必填的minlength =“ 2”和maxlength =“ 4”属性。最小长度/最大长度，按您的要求。

例如群组单选按钮：

<fieldset class="col-md-12">
  <legend>Gender</legend>
  <div class="form-row">
    <div class="col-12 col-md-12 form-group">
        <label class="form-check-inline">
          <input type="radio" name="gendergroup[]" value="m" required="required" data-msg-required="This value is required.">man
        </label>
        <label class="form-check-inline">
          <input type="radio" name="gendergroup[]" value="w">woman
        </label>
        <label class="form-check-inline">
          <input type="radio" name="gendergroup[]" value="o">other
        </label>
        <label for="gendergroup[]" class="error">Your error message will be display here.</label>
    </div>
  </div>
</fieldset>

您可以查看工作示例here。

jQuery v3.3.x
jQuery验证插件-v1.17.0

Answer 4

有简单的方法

<强> HTML：

<input type="checkbox" name="test[]" />x
<input type="checkbox" name="test[]"  />y
<input type="checkbox" name="test[]" />z
<button type="button" id="submit">Submit</button>

<强> JQUERY：

$("#submit").on("click",function(){
    if (($("input[name*='test']:checked").length)<=0) {
        alert("You must check at least 1 box");
    }
    return true;
});

为此您不需要任何插件。享;）

jQuery Validation插件：验证复选框

4 个答案: