jQuery Validate復選框（組至少一個）

Question

我有一個非常復雜的表單，其中包含X組復選框：

<div class="checkbox-block1">
 <input id="package-1-1" name="member[1][package][19]" type="checkbox" class="checkbox" value="100" style="float: left;">
 <input id="package-1-2" name="member[1][package][234]" type="checkbox" class="checkbox" value="300" style="float: left;">
 <input id="package-1-3" name="member[1][package][254]" type="checkbox" class="checkbox" value="500" style="float: left;">
</div>
<div class="checkbox-block2">
 <input id="package-2-1" name="member[2][package][19]" type="checkbox" class="checkbox" value="100" style="float: left;">
 <input id="package-2-2" name="member[2][package][234]" type="checkbox" class="checkbox" value="300" style="float: left;">
 <input id="package-2-3" name="member[2][package][254]" type="checkbox" class="checkbox" value="500" style="float: left;">
</div>

我需要使用至少在組/塊復選框上要求的規則來驗證表單。 我嘗試：

      $(document).ready(function () {
            $("#myform-s3").validate({
                rules: {
                    'member[1]': {
                        required: true,
                        minlength: 1
                    },
                    'member[2]': {
                        required: true,
                        minlength: 1
                    },
                    'member[3]': {
                        required: true,
                        minlength: 1
                    }
                },
                errorPlacement: function(error, element) {
                    if ( element.is(':radio') || element.is(':checkbox') ) {
                        error.insertBefore( element.next() );
                    } else {
                        error.insertAfter( element );
                    }
                },
                submitHandler: function (form) { // for demo
                    alert('valid form');
                    return false;
                }
            });

但是，當未選中任何復選框時，我也會收到“有效表格”。

PS：用戶以以前的形式選擇了塊數，那么我可以有1、2、3或更多的復選框。

Answer 1

您的代碼...

rules: {
    'member[1]': {  // <- MUST be the NAME of input element

member[1]不是任何東西的name ，因此什么也不會發生。 您不能在此處使用部分名稱或選擇器，只能使用name屬性的實際值。

---

解決方案1

要驗證一組復選框，您需要它們全部共享相同的name ...

<div class="checkbox-block1">
    <input id="package-1-1" name="member[1]" type="checkbox" class="checkbox" value="100" style="float: left;">
    <input id="package-1-2" name="member[1]" type="checkbox" class="checkbox" value="300" style="float: left;">
    <input id="package-1-3" name="member[1]" type="checkbox" class="checkbox" value="500" style="float: left;">
</div>

然后，您可以簡單地單獨使用required規則...

$(document).ready(function () {
    $("#myform-s3").validate({
        rules: {
            'member[1]': {
                required: true
            }, ....

演示1： https : //jsfiddle.net/1an60fxy/

---

解決方案2

如果您不能更改命名，則必須使用.rules()方法動態聲明規則，並使用“起始於”選擇符^= 。

不要在.validate()聲明規則...

$(document).ready(function () {
    $("#myform-s3").validate({
        rules: {
            // other fields maybe
        ....

將.rules()方法與.each()和required_from_group規則一起使用。 注意， required_from_group是additional-methods.js文件的一部分 。

$('[name^="member[1]"]').each(function() {
    $(this).rules('add', {
        require_from_group: [1, $('[id^="package-1"]')]
    });
});

其中1是組中所需的最小數目， $('[id^="package-1"]')以組中的所有成員為目標。

演示2： jsfiddle.net/1an60fxy/2/

在此版本中，您會收到重復的郵件，必須使用groups選項來處理。 由於表單是復雜且動態的，因此您需要在調用.validate()之前動態構造此選項。 這是一個例子 。

var names1 = ""; // create empty string
$('[id^="package-1"]').each(function() { // grab each input starting w/ the class
    names1 += $(this).attr('name') + " "; // append each name + single space to string
});
names1 = $.trim(names1); // remove the empty space from the end

$("#myform-s3").validate({
    groups: {
        myGroup: names1 // reference the string
    }, 
    ....

演示2b： jsfiddle.net/1an60fxy/3/