確保至少有一個從三個複選框使用jQuery驗證

Question

我在大表單上使用jQuery Validate插件，並且已經使用require_from_group方法（after posting previously）確保至少有一個來自一組檢查三個複選框。

但是，我已經ran into an issue與這阻止其他規則工作。我已經申請了一個suggested patch，但這似乎並沒有正常工作（如上面提到的GitHub問題）。

所以我需要找到另一種方法來驗證這組三個複選框字段（請注意，我需要專門針對這組三個checkboes，因爲我在表單上有其他不需要驗證的複選框字段），但我不確定現在從哪裏開始。我想我需要添加一些自定義規則到我的jQuery驗證代碼中，但是我不確定現在從哪裏開始，所以要感謝一些建議，謝謝。

這裏是我的出發HTML（剝離到最基本這個問題）：

<form class="my_form" method="post" action="/" > 

    <div><ul class="form_errors"></ul></div> 

    <label><input class="my_checkbox_group" id="my_checkbox_1" name="my_checkbox_1[]" type="checkbox" value="Yes"> My checkbox 1</label> 
    <label><input class="my_checkbox_group" id="my_checkbox_2" name="my_checkbox_2[]" type="checkbox" value="Yes"> My checkbox 2</label> 
    <label><input class="my_checkbox_group" id="my_checkbox_3" name="my_checkbox_3[]" type="checkbox" value="Yes"> My checkbox 3</label> 

    <input type="submit" value="Submit" /> 

</form> 

這裏是我的出發JS（這使得所有三個強制性的複選框，但我只是想從三個至少一個是選中）：

$(".my_form").validate({ 
    errorLabelContainer: ".form_errors", 
    wrapper: "li", 
    rules: { 
    'my_checkbox_1[]': { required: true }, 
    'my_checkbox_2[]': { required: true }, 
    'my_checkbox_3[]': { required: true } 
    }, 
    messages: { 
    'my_checkbox_1[]': "This field is required", 
    'my_checkbox_2[]': "This field is required", 
    'my_checkbox_3[]': "This field is required" 
    } 
}); 

編輯1：對不起，我應該補充說，每個複選框的名稱屬性不能是相同的。這些名稱映射到CMS中的特定自定義字段名稱，因此如果它們完全相同，則在提交表單時，字段中的值將不會正確保存。這也是爲什麼我從未遵循jQuery Validate demo page上的第二個例子的原因。

Answer 1

I wrote a custom method，檢查，以確保三個複選框中的至少一個被選中。

它可以完成工作，而無需修改任何您name或id屬性，或添加任何新的HTML。 （但是，你有一些無效的HTML，我清理了一下。）

$.validator.addMethod("checkboxrule", function (value, element) { 
    return ($('#my_checkbox_1').is(':checked') || $('#my_checkbox_2').is(':checked') || $('#my_checkbox_3').is(':checked')); 
}, "Select at least one of these three"); 

工作演示：http://jsfiddle.net/u4WM4/

我還使用了groups選項把三種信息爲一體。 （你可以，如果你想三封郵件，而不是簡單地將其刪除。）

完整的jQuery：

$(document).ready(function() { 

    $.validator.addMethod("checkboxrule", function (value, element) { 
     return ($('#my_checkbox_1').is(':checked') || $('#my_checkbox_2').is(':checked') || $('#my_checkbox_3').is(':checked')) 
    }, "Select at least one of these three"); 

    $('.my_form').validate({ 
     errorLabelContainer: ".form_errors", 
     wrapper: "li", 
     groups: { 
      somename: "my_checkbox_1[] my_checkbox_2[] my_checkbox_3[]" 
     }, 
     rules: { 
      'my_checkbox_1[]': { 
       checkboxrule: true 
      }, 
      'my_checkbox_2[]': { 
       checkboxrule: true 
      }, 
      'my_checkbox_3[]': { 
       checkboxrule: true 
      } 
     } 
    }); 

}); 

Answer 2

嘗試

HTML

您不必使用不同name array attribute，它可以用來像

<label><input class="my_checkbox_group" id="my_checkbox_1" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 1</label> 
<label><input class="my_checkbox_group" id="my_checkbox_2" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 2</label> 
<label><input class="my_checkbox_group" id="my_checkbox_3" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 3</label> 

SCRIPT

在validate Plugin

$('.my_form').validate({ 
    errorLabelContainer: ".form_errors", 
    wrapper: "li", 
    rules: { 
     "my_checkbox[]": { 
      required: true, 
      minlength: 1 
    }, 
    messages: { 
     'my_checkbox[]': "This field is required"   
    } 
}); 

從http://docs.jquery.com/Plugins/Validation/Reference#Fields_with_complex_names_.28brackets.2C_dots.29

在simple Jquery

var isChecked=false; 
$('input.my_checkbox_group').each(function(){ 
    if($(this).is(':checked')) 
    { 
     isChecked=true; 
    } 
}); 
if(isChecked==false) 
{ 
    alert("Please select a group"); 
} 

Answer 3

我認爲你需要改變name屬性爲。需要爲每個複選框設置相同的名稱。

<label><input class="my_checkbox_group" id="my_checkbox_1" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 1</label> 
<label><input class="my_checkbox_group" id="my_checkbox_2" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 2</label> 
<label><input class="my_checkbox_group" id="my_checkbox_3" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 3</label> 

JS代碼

$(".my_form").validate({ 
    errorLabelContainer: ".form_errors", 
    wrapper: "li", 
    rules : { 
     "my_checkbox[]" : { 
      required : true, 
      minlength : 1 
     } 
    }, 
    messages : { 
     "my_checkbox[]" : { 
      required : "must have checkbox selected", 
      minlength : "atleast 1 checkbox should be checked" 
     } 
    } 
});