22

我正在使用 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"
  }
 });
4

4 回答 4

55

您的代码有几个问题。

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

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

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

});
于 2013-03-16T18:40:00.443 回答
1

您无需额外的 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>

您可以在此处查看工作示例。

  • jQuery v3.3.x
  • jQuery 验证插件 - v1.17.0
于 2019-08-02T20:01:48.973 回答
1

为我工作：

<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

于 2021-03-06T10:26:09.733 回答
-1

有简单的方法

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>

查询：

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

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

于 2014-09-17T13:48:27.650 回答