1

初めて HTML フォームで jQuery Validation プラグインを使用しています。私はこれに普通の古い JavaScript を使用することに慣れていますが、このプラグインが大好きです! とにかく、私はいくつかの条件付き検証をしようとして立ち往生しています。

シナリオ: フォームに 2 つの部分からなる質問があります。最初の部分は、はい/いいえのドロップダウンです (必須)。2 番目の部分はチェックボックスのグループです。前のドロップダウンで「はい」を選択した場合は、少なくとも 1 つのチェック ボックスをオンにする必要があります。

<div>
<p><span class="bold large-font">8.</span> Some question to answer Yes or No to...</p>
<div class="margin-left-fifty">
    <select id="Q8" class="Q8" name="Q8">
        <option value="" selected></option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
    </select>
</div>
<div class="margin-left-fifty">
    <p><span class="underline italic">If Yes,</span> indicate which areas...</p>
</div>
<div class="margin-left-eighty">
    <input id="Q8yesA" class="Q8yes" name="Q8yesA" type="checkbox" value="Yes" />                    
    <label for="Q8yesA"><span class="small-font">a.</span> Option A</label>
    <br />
    <input id="Q8yesB" class="Q8yes" name="Q8yesB" type="checkbox" value="Yes" />                                            
    <label for="Q8yesB"><span class="small-font">b.</span> Option B</label>
    <br />
    <input id="Q8yesC" class="Q8yes" name="Q8yesC" type="checkbox" value="Yes" />                                            
    <label for="Q8yesC"><span class="small-font">c.</span> Option C</label>
    <br />
    <input id="Q8yesD" class="Q8yes" name="Q8yesD" type="checkbox" value="Yes" />                        
    <label for="Q8yesD"><span class="small-font">d.</span> Other</label>
    <input name="Q8yesDlist" type="text" maxlength="255" size="50" value="" placeholder="Please list..." />                    
</div>

はかなり大規模な調査の一部であるため、照合を簡単かつ迅速にするために、配列を使用するのではなく、各回答を個別にしました。

チェックボックスを検証するために使用しているコードは、ここからのものだと思います： 少なくとも1つのチェックボックスの検証

だから今、私の関数は次のようになります。

$(function(){

$.validator.addMethod('Q8yes', function (value) {
return $('.Q8yes:checked').size() > 0; }, 'Please check at least one box for Question 8.');

var checkboxes8 = $('.Q8yes');
var checkbox_names8 = $.map(checkboxes8, function(e,i) { return $(e).attr("name")}).join(" ");              

$('#survey').validate({
groups: {
    checks8: checkbox_names8
},
rules: {
  Q8: "required",
},
messages: {
  Q8: "Please answer Question 8.",                              
},
errorContainer: $('#errorContainer'),
errorLabelContainer: $('#errorContainer ul'),
wrapper: 'li'
});
});

addMethod を If ステートメントでラップしようとしてきましたが、よくわかりませんでした。それが正しい考えかどうかさえ、私にはわかりません。

あなたの助けは大歓迎です！ありがとう！

4

1 に答える 1

0

これを行うにはいくつかの方法があり、そのうちの 1 つに進んでいます。私は別の方法を提案するつもりです。nameまず、チェックボックスを再編成して、すべて同じ属性で異なる属性を持つようにすることは理にかなっていvalueます。これにより、jQuery Validate 内での動作が向上します。これはあなたが今持っているものです：

<input id="Q8yesA" class="Q8yes" name="Q8yesA" type="checkbox" value="Yes" />

それを次のように変更します。

<input id="Q8yesA" class="Q8yes" name="Q8yes" type="checkbox" value="Q8yesA" />

次に、実際の jQuery Validate コードについて説明します。私が提案した方法でこれを行う場合、おそらくグループは必要ありません。代わりに、次のようにすることができますrules。

rules: {
    Q8: "required",
    Q8yes: {
        required: '#Q8 option[value="Yes"]:selected'
    },
    Q8yesDlist: {
        required: '#Q8yesD:checked'
    }
 }

必要なルールのdependency-expressionバージョンを使用しました。

実際の動作は次のとおりです。 http://jsfiddle.net/ryleyb/fccPf/

于 2013-03-14T16:11:14.320 に答える