jQuery 验证插件：验证复选框

Question

我正在使用jQuery Validation插件来验证复选框，因为它没有默认选项，必须选择一个且最多只能选择两个复选框，这是标准。但我没有收到任何错误信息，也无法进行验证。我是这样扩展它的：

  <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"
  }
 });

- ram

Answer 1

你的代码有几个问题。

1) rules 中缺少一个闭合括号}。

2) 在这种情况下，没有必要为 required 规则使用函数。默认情况下，插件可以很好地处理 checkbox 和 radio 输入，因此只需使用 true 即可。但是，这将执行与原始函数相同的逻辑，并验证至少选中一个。

3) 如果您还想仅选中最多两个，则需要应用 maxlength 规则。

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

5) 如果 name 属性包含括号，则必须将其用引号括起来。

演示：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"
            }
        }
    });

});

- Sparky

Answer 2

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

您的JS应该如下所示：

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

您可以使用HTML标签和属性进行操作：例如，组复选框[minlength=2 and 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>

您可以在这里看到，第一个或任何一个输入都应该有required、minlength="2"和maxlength="4"属性。根据您的要求，minlength/maxlength可以设置。

例如：单选按钮组：

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

您可以在这里查看一个工作示例。

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

- Ghanshyam Gohel

Answer 3

为我工作：

<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

- sapan burman

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;
});

对此您不需要任何插件。 享受吧;)

- Ivijan Stefan Stipić

---

也许代码更短了，但 @ram 使用了验证插件，该插件使用规则来进行验证。 - Limon

没错，但我提供了这个解决方案而不需要额外的库。 - Ivijan Stefan Stipić

是的，jQuery是这个解决方案唯一需要的库。您不需要额外的插件或库。 - Ivijan Stefan Stipić