使用jquery AND Rules進行動態表單字段驗證

Question

這個問題是我的SO問題的延伸：

jQuery根據循環內選擇的單選按鈕禁用/啟用textarea

我正在使用jQuery bassistance驗證插件（ http://bassistance.de/jquery-plugins/jquery-plugin-validation/ ）。

我試圖創建的驗證規則是，如果單選按鈕等於“是”，則將textarea設為必填字段。 收音機和textarea框的我的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');
        }
    });

Answer 1

這是一個通用答案，您可以將其應用到您的代碼中......

---

我相當肯定你不能在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"
    }
}

mytextarea將是textarea的name屬性的value 。

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

---

另外...

動態應用jQuery .validate()規則。

首先使用選項初始化.validate()插件：

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

創建規則數組（注意使用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

---

BTW， .live()已被棄用，轉而使用.on() 。