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

Answer 1

您的代码有几个问题。

1) 在您的rules 中缺少右大括号}。

2) 在这种情况下，没有理由为required 规则使用函数。默认情况下，插件可以很好地处理checkbox 和radio 输入，所以使用true 就足够了。但是，这将简单地执行与原始函数相同的逻辑，并验证是否至少检查了一个。

3)如果您还希望最多只检查两个，那么您需要应用maxlength 规则。

4) messages 选项缺少规则规范。它会起作用，但一条自定义消息将适用于同一字段上的所有规则。

5) 如果name 属性包含括号，则为you must enclose it within quotes。

演示：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

您无需额外的 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" 属性。 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>

您可以查看工作示例here。

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

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

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

为此，您不需要任何插件。 享受；）