jQuery 验证插件：验证复选框

jQuery Validation plugin: validate check box

提问by ram

I am using jQuery Validation plugin to validate check box since it does not have default option, One should be selected and max two check boxes can be selected, these is the criteria. I am not getting any error and it is not validating. I am extending it like below,

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

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

回答by Sparky

You had several issues with your code.

您的代码有几个问题。

1)Missing a closing brace, }, within your rules.

1）缺失，一个右括号}，内你的rules。

2)In this case, there is no reason to use a function for the requiredrule. By default, the plugin can handle checkboxand radioinputs just fine, so using trueis enough. However, this will simply do the same logic as in your original function and verify that at least one is checked.

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

3)If you also want only a maximum of two to be checked, then you'll need to apply the maxlengthrule.

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

4)The messagesoption was missing the rule specification. It will work, but the one custom message would apply to all rules on the same field.

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

5)If a nameattribute contains brackets, you must enclose it within quotes.

5)如果name属性包含方括号，则必须将其括在引号内。

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

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

});

回答by Ghanshyam Gohel

You can validate group checkbox and radio button without extra js code, see below example.

Your JS should be look like:

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

你的 JS 应该是这样的：

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

You can play with HTML tag and attributes: eg. group checkbox [minlength=2 and maxlength=4]

您可以使用 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>

You can see here first or any one input should have required, minlength="2" and maxlength="4" attributes. minlength/maxlength as per your requirement.

您可以在此处首先看到或任何一个输入都应具有 minlength="2" 和 maxlength="4" 属性。minlength/maxlength 根据您的要求。

eg. group radio button:

例如。组单选按钮：

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

You can check working example here.

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

• jQuery v3.3.x
• jQuery Validation Plugin - v1.17.0

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

回答by Ivijan Stefan Stipi?

There is the easy way

有一个简单的方法

HTML:

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

For this you not need any plugin. Enjoy;)

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