jQuery为选定的广播选择自定义验证

Question

这是我的要求：我有一堆无线电框选择（工作流类型）。如果选择其中一个无线电（即选择了一种特定类型的工作流程），我想对其执行自定义验证。这是我的尝试，但表现不佳。任何帮助？

jQuery的一部分：

$(document).ready(function() { 
    // this part is to expand the child radio selection if particular parent workflow selected 
    $("#concernedDirectorChoice").hide(); 
    $("input[name^=workflowChoice]").change(function(){ 
     if($(this).attr("class")=='chooseDir'){ 
     $("#concernedDirectorChoice").show(); 
     }else{ 
     $("#concernedDirectorChoice").hide(); } 
     }); 

    // FORM VALIDATION 
    $.validator.addMethod("dirRequired", function(value, element) { 
     return this.optional(element) || ($("input[name^=rdDir:checked]").length); 
    }, "That particular workflow requires a Director to be chosen. Please select Director"); 

    $("#contExpInitiateForm").validate({ 
     debug:true 
     ,rules:{ 
     RenewalNo: {required: true, number: true}, 
     chooseDir: {dirRequired: true}, 
     workflowChoice: {required: true} } 
     ,errorPlacement: function(error, element) { 
     $('.errorMessageBox').text(error.html()); } 
    }); 
    }); 

HTML组成部分：

<!-- Pick type of workflow --> 
    <table class="hr-table" > 
     <tr> <td class="hr-table-label " colspan=2 >Pick Workflow Type</td> </tr> 
     <tr> 
     <td> <input type="radio" name="workflowChoice" value="1"> </input> </td> 
     <td> Workflow 1 </td> 
     </tr> 
     <tr> 
     <td> <input type="radio" name="workflowChoice" value="2" class="chooseDir"> </input> </td> 
     <td> Workflow 2 (Dir selection required) </td> 
     </tr> 
     <tr> 
     <td> <input type="radio" name="workflowChoice" value="3"> </input> </td> 
     <td> Workflow 3 </td> 
     </tr> 
    </table>  

    <!-- Pick Director for Workflow type 2 --> 
    <table id="concernedDirectorChoice" name="concernedDirectorChoice" >  
     <tr><td class="hr-table-label" colspan=2 > Choose Concerned Director</td></tr> 
    <tr> 
    <td><input type="radio" value='Dir1' name="rdDir" /></td> 
    <td>Director 1</td> 
    </tr> 
    <tr> 
    <td><input type="radio" value='Dir2' name="rdDir" /></td> 
    <td>Director 2</td> 
    </tr> 
    <tr> 
    <td><input type="radio" value='Dir3' name="rdDir" /></td> 
    <td>Director 3</td> 
    </tr> 
    </table> 

Answer 1

你的主要问题是可能的选择中，:checked需要的attirubte旁边（[]）选择，所以这input[name^=rdDir:checked]应该是input[name^=rdDir]:checked。

从您的标记看，如果选择<input type="radio" class="chooseDir" />中的任何一个，您就需要它（所以需要将其更改为.chooseDir:checked）。

此外，规则对应该是nameOfElement: { rules}，因此您需要rdDir以代替chooseDir。

就像一个提示，但你也可以做到这一点没有一个自定义的方法（如果你不是在多个地方使用它，在这种情况下，我会坚持自定义方法），因为required:可以采取一个选择器只是一个true/false。如果选择器发现任何东西，那么它是必需的，如果不是，则不需要。

这里的一切之上放在一起，所以你可以看到整个画面看起来像：

$("#contExpInitiateForm").validate({ 
    debug:true 
    ,rules:{ 
    RenewalNo: {required: true, number: true}, 
    rdDir: {required: ".chooseDir:checked"}, 
    workflowChoice: {required: true} } 
    ,messages:{ 
    rdDir: "That particular workflow requires a Director to be chosen. Please select Director" } 
    ,errorPlacement: function(error, element) { 
    $('.errorMessageBox').text(error.html()); } 
}); 

在上面的代码，需要rdDir单选按钮列表，如果任何class="chooseDir"单选按钮被选中，并将显示提供的信息，如果需要并且未填写的话。