2016-04-03 6 views
0

親愛なるJavascriptのプロのブラケットが含まれているグループ、jQueryのは、フィールド名が

私は、チェックボックスの2つのグループを含むHTMLフォームを持っているの検証。グループの1つにチェックボックスがあり、jQueryの検証に合格するかどうかチェックする必要があります。他のグループは選択するために必須ではありません。

First group (at least one checkbox should be selected): 
<input type="checkbox" name="appSourceFirstoption[1]" value="Answer 1" id="appSourceFirstoption" /> 
<input type="checkbox" name="appSourceSecondoption[1]" value="Answer 2" id="appSourceSecondoption" /> 
<input type="checkbox" name="appSourceThirdoption[1]" value="Answer 3" id="appSourceThirdoption" /> 


Second group (these checkboxes are voluntary to select): 
<input type="checkbox" name="appSourceVoluntaryFirst[1]" value="Answer 1" id="appSourceVoluntaryFirst" /> 
<input type="checkbox" name="appSourceVoluntarySecond[1]" value="Answer 2" id="appSourceVoluntarySecond" /> 
<input type="checkbox" name="appSourceVoluntaryThird[1]" value="Answer 3" id="appSourceVoluntaryThird" /> 

チェックボックスの名前には配列表記が含まれています。 checkboxName [1]( "1"はフォームに記入された人物を指します)。

さて、これは完璧に動作します:

$.validator.addMethod('checkbox', function(value) { 
    return $('input[type=checkbox]:checked').size() > 0; 
    }, 'Please select at least one.'); 

を、それは(1つのチェックボックスは第二の自主グループから選択された場合ので、検証にも渡すことができます)チェックボックスのすべてに適用されます。

必須のチェックボックスをグループ化しようとすると、機能しません。私は、彼らの名前には上記のような[]が含まれているからです。

// adding the group 
    $.validator.addMethod("checkbox_1", function(value, element) { 
    return $('.checkbox_1:checked').length > 0; 
    }, 'Please select at least one.'); 


    $('#step').validate({ 

    // grouping the checkboxes together 
    groups: { 
    checkbox_1: "appSourceFirstoption[1] appSourceSecondoption[1] appSourceThirdoption[1]" 
    }, 

    // applying the group rules to just one of the checkbox 
    "appSourceFirstoption[1]" : { checkbox_1: true }, 
    } 

あなたは私がこれをどのように解決できるか考えていますか?

+0

あなたもあなたのhtmlスニペットを追加してください。 –

+0

要求通りにHTMLを追加しました。 – BigRooster

+0

チェックボックスは既にグループに属しているので、すべて同じ 'name'属性を与えてください。これの多くはまったく問題です。カスタムメソッドは必要ありません:https://jsfiddle.net/ffk1ubnz/ – Sparky

答えて

0

1)あなたは "ルール" オプションが欠落している、

rules: { 
     "appSourceFirstoption[1]": { checkbox_1: true } 
     } 

2)$('.checkbox_1:checked').length > 0;

$(document).ready(function() { 


$('#step').validate({ 

    // grouping the checkboxes together 
    groups: { 
       checkbox_1: "appSourceFirstoption[1] appSourceSecondoption[1] appSourceThirdoption[1]" 
      }, 

    // applying the group rules to just one of the checkbox 
    rules: { 
       "appSourceFirstoption[1]": { checkbox_1: true } 
      } 
}); 

$.validator.addMethod("checkbox_1", function (value, element) { 
    return $('input[type=checkbox]:checked').length > 0; 
}, 'Please select at least one.'); 


}); 

完全なコード

$('input[type=checkbox]:checked').length > 0; 

に取り組んでフィドルを変更します。 - https://jsfiddle.net/8ukbf3wy/