1

この質問は私のSOの質問の拡張です:

ループ内で選択されたラジオボタンに応じてテキストエリアを無効/有効にするjQuery

私は jQuery Bassistance 検証プラグイン ( http://bassistance.de/jquery-plugins/jquery-plugin-validation/ ) を使用しています。

私が作成しようとしている検証ルールは、ラジオボタンが「はい」の場合、テキストエリアを必須フィールドにすることです。ラジオ ボックスとテキストエリア ボックスの ID とフォーム フィールド名は動的ですが、同じ単語で始まるので、name^='travel'

HTML 更新

<div class="controls">
    <label class="radio inline">
        <input type="radio" name="travel_1" data-travelNumber="1" id="travel_yes_1" value="Yes" tabindex="25" >
        Yes </label>
    <label class="radio inline">
        <input name="travel_1" type="radio" data-travelNumber="1" id="travel_no_1" value="No" tabindex="26" checked >
        No </label>
</div>
<div class="controls" id="Answer_travel_yes_1">
    <textarea name="travelDetails_1" id="travelDetails_1" ></textarea>
</div>

<div class="controls">
    <label class="radio inline">
        <input type="radio" name="travel_2" data-travelNumber="2" id="travel_yes_2" value="Yes" tabindex="25" >
        Yes </label>
    <label class="radio inline">
        <input name="travel_2" type="radio" data-travelNumber="2" id="travel_no_2" value="No" tabindex="26" checked >
        No </label>
</div>
<div class="controls" id="Answer_travel_yes_2">
    <textarea name="travelDetails_2" id="travelDetails_2"></textarea>
</div>


<div class="controls">
    <label class="radio inline">
        <input type="radio" name="travel_3" data-travelNumber="3" id="travel_yes_3" value="Yes" tabindex="25" >
        Yes </label>
    <label class="radio inline">
        <input name="travel_3" type="radio" data-travelNumber="3" id="travel_no_3" value="No" tabindex="26" checked >
        No </label>
</div>
<div class="controls" id="Answer_travel_yes_3">
    <textarea name="travelDetails_3" id="travelDetails_3"></textarea>
</div>

jQuery

//  I use this to hide/show the travelDetails textarea (show on yes, hide on no)
$('input:radio[name^="travel"]:checked').live('click',function(){
    var id = $(this).attr("id").split("_");
    id = id[id.length-1];
    $("#travelDetails_" + id).attr("disabled", !($(this).val() == "Yes"));
    if ( $(this).val() == 'Yes' ) 
        $('#Answer_travel_yes_' + id).slideDown();
    else
        $('#Answer_travel_yes_' + id).slideUp();
});


$("#TravelForm").validate({
        rules:{
            whatgoeshere:{
                    required: function(){
                        if ( $("input:radio[name^=travel]:checked").val() == "Yes" ){
                            //  make travel
                            true
                        }
                        else{
                            console.log('false');
                            true
                        }
          },
                    minlength: 10   // needs to have at least 10 characters entered (if the corresponding radio is Yes
            }
        },
        messages:{
            whatgoeshere:{
                required:"Please enter your travel details",
                minlength:"Please enter at least 10 characters"
            }
        },
        errorClass: "help-inline",
        errorElement: "span",
        highlight:function(element, errorClass, validClass) {
            $(element).parents('.control-group').addClass('error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents('.control-group').removeClass('error');
            //  $(element).parents('.control-group').addClass('success');
        }
    });
4

1 に答える 1

3

これは、コードに適用できる一般的な回答です...

rulesオプション 内で関数を使用できないことは確かです。ドキュメントに従って、プロパティrules:を使用しない限り、「キーと値のペア」である必要がありdependsます。

rules: {
    mytextarea: {
        minlength: 10,
        required: {
            depends: function(element) {
                return $("#myradio:checked")
            }
        }
    }
},
messages: {
    mytextarea: {
        required: "Please enter your travel details",
        minlength: "Please enter at least 10 characters"
    }
}

mytextareavalueのname属性の になりますtextarea。

<textarea name="mytextarea"></textarea>

あるいは...

jQuery.validate()ルールを動的に適用します。

最初.validate()にオプションを使用してプラグインを初期化します。

$('form').validate({
    // your options, leave out the rule in question
});

rules 配列を作成します ( を使用する場合は、形式が少し異なることに注意してくださいmessages)。

var myrule = {
    required: true,
    minlength: 10,
    messages: {
        required: "Please enter your travel details",
        minlength: "Please enter at least 10 characters"
    }
}

次に、条件内で、textarea必要に応じて をターゲットにします。

if ($(this).val() == 'Yes') {
    $('[name^="travel"]').rules('add', myrule);
} else {
    $('[name^="travel"]').rules('remove', myrule);
}

http://docs.jquery.com/Plugins/Validation/rules#.22add.22rules

ところで、.live()を支持して廃止されました.on()。

于 2012-12-21T19:14:06.727 に答える