Question

这个问题是我的问题的延伸：

jQuery to disable/enable textarea depending on which radio button is selected inside of loop

我正在使用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选项中使用一个函数。 As per documentation，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将是value的{{1}}属性的name。

textarea

<强>另外...

动态应用jQuery <textarea name="mytextarea"></textarea>规则。

首先使用选项初始化您的.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

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

BTW，.live() has been deprecated in favor of .on()。

使用jquery AND Rules进行动态表单字段验证

1 个答案: