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"單選按鈕被選中，並將顯示提供的信息，如果需要並且未填寫的話。